---
import { cn } from '../lib/cn'

import Button from './Button.astro'

import type { AstroChildren } from '../lib/astro'
import type { HTMLAttributes } from 'astro/types'

export type Props = HTMLAttributes<'div'> & {
  children: AstroChildren
  label: string
  icon?: string
  classNames?: {
    label?: string
    icon?: string
    arrow?: string
    button?: string
  }
}

const buttonId = Astro.locals.makeId('dropdown-button')
const menuId = Astro.locals.makeId('dropdown-menu')

const { label, icon, class: className, classNames, ...htmlProps } = Astro.props
---

<div class={cn('group/dropdown relative', className)} {...htmlProps}>
  <Button
    class={cn(
      'group-hover/dropdown:bg-night-900 group-focus-within/dropdown:bg-night-900 group-focus-within/dropdown:text-day-200 group-hover/dropdown:text-day-200',
      classNames?.button
    )}
    icon={icon}
    label={label}
    endIcon="ri:arrow-down-s-line"
    classNames={{
      label: classNames?.label,
      icon: classNames?.icon,
      endIcon: cn(
        'transition-transform group-focus-within/dropdown:rotate-180 group-hover/dropdown:rotate-180',
        classNames?.arrow
      ),
    }}
    aria-haspopup="true"
    aria-controls={menuId}
    id={buttonId}
  />

  <div
    class="border-night-500 bg-night-900 absolute right-0 z-50 mt-1 hidden w-48 items-stretch rounded-md border py-1 shadow-lg group-focus-within/dropdown:block group-hover/dropdown:block before:absolute before:-inset-x-px before:bottom-[calc(100%-1*var(--spacing))] before:box-content before:h-2 before:pb-px"
    role="menu"
    aria-orientation="vertical"
    aria-labelledby={buttonId}
    id={menuId}
  >
    <slot />
  </div>
</div>
