Dropdown.tsx

import * as React from 'react'
import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
import { twMerge } from 'tailwind-merge'

type DropdownProps = {
  children: React.ReactNode
  open?: boolean
  onOpenChange?: (open: boolean) => void
  modal?: boolean
}

type DropdownTriggerProps = {
  children: React.ReactNode
  className?: string
  asChild?: boolean
}

type DropdownContentProps = {
  children: React.ReactNode
  className?: string
  align?: 'start' | 'center' | 'end'
  sideOffset?: number
}

type DropdownItemProps = {
  children: React.ReactNode
  className?: string
  onSelect?: () => void
  asChild?: boolean
}

type DropdownSeparatorProps = {
  className?: string
}

export function Dropdown({
  children,
  open,
  onOpenChange,
  modal = false, // IMPORTANT DEFAULT
}: DropdownProps) {
  return (
    <DropdownMenu.Root
      open={open}
      onOpenChange={onOpenChange}
      modal={modal}
    >
      {children}
    </DropdownMenu.Root>
  )
}

export function DropdownTrigger({
  children,
  className,
  asChild = true,
}: DropdownTriggerProps) {
  return (
    <DropdownMenu.Trigger asChild={asChild} className={className}>
      {children}
    </DropdownMenu.Trigger>
  )
}

export function DropdownContent({
  children,
  className,
  align = 'end',
  sideOffset = 6,
}: DropdownContentProps) {
  return (
    <DropdownMenu.Portal>
      <DropdownMenu.Content
        align={align}
        sideOffset={sideOffset}
        onCloseAutoFocus={(e) => e.preventDefault()}
        onInteractOutside={(e) => {
          // Only close if clicking far outside dropdown
          const target = e.target as HTMLElement
          if (!target.closest('[role="listbox"]') && 
              !target.closest('button[class*="dropdown"]')) {
            return // Allow the close
          }
          e.preventDefault() // Block close if clicking dropdown area
        }}
        className={twMerge(
          'dropdown-content z-[1000] min-w-48 rounded-lg p-1.5',
          'border border-gray-200 dark:border-gray-700',
          'bg-white dark:bg-gray-800',
          'shadow-lg',
          className,
        )}
      >
        {children}
      </DropdownMenu.Content>
    </DropdownMenu.Portal>
  )
}


export function DropdownItem({
  children,
  className,
  onSelect,
  asChild,
}: DropdownItemProps) {
  return (
    <DropdownMenu.Item
      asChild={asChild}
      onSelect={onSelect}
      className={twMerge(
        'flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 outline-none',
        'text-sm text-gray-700 dark:text-gray-300',
        'hover:bg-gray-100 dark:hover:bg-gray-700/50',
        'focus:bg-gray-100 dark:focus:bg-gray-700/50',
        'transition-colors duration-150',
        className,
      )}
    >
      {children}
    </DropdownMenu.Item>
  )
}

export function DropdownSeparator({ className }: DropdownSeparatorProps) {
  return (
    <DropdownMenu.Separator
      className={twMerge('my-1 h-px bg-gray-200 dark:bg-gray-700', className)}
    />
  )
}