import * as Dropdown from '@radix-ui/react-dropdown-menu';
import { type ReactNode } from 'react';
import { cn } from '../../lib/cn';

export const DropdownMenu = Dropdown.Root;
export const DropdownMenuTrigger = Dropdown.Trigger;
export const DropdownMenuSeparator = ({ className }: { className?: string }) => (
  <Dropdown.Separator className={cn('my-1 h-px bg-[#333]', className)} />
);

export function DropdownMenuContent({
  children,
  align = 'end',
  className,
}: {
  children: ReactNode;
  align?: 'start' | 'center' | 'end';
  className?: string;
}) {
  return (
    <Dropdown.Portal>
      <Dropdown.Content
        align={align}
        sideOffset={6}
        className={cn(
          'z-50 min-w-[10rem] overflow-hidden rounded-md border border-[#333] bg-[#1A1A1A] p-1 shadow-xl animate-in fade-in-80',
          className,
        )}
      >
        {children}
      </Dropdown.Content>
    </Dropdown.Portal>
  );
}

export function DropdownMenuItem({
  children,
  onSelect,
  disabled,
  destructive,
  className,
}: {
  children: ReactNode;
  onSelect?: () => void;
  disabled?: boolean;
  destructive?: boolean;
  className?: string;
}) {
  return (
    <Dropdown.Item
      disabled={disabled}
      onSelect={onSelect}
      className={cn(
        'flex cursor-pointer select-none items-center gap-2 rounded px-3 py-1.5 text-xs outline-none transition-colors',
        destructive
          ? 'text-[#FF3B3B] data-[highlighted]:bg-[#FF3B3B]/10'
          : 'text-[#F5F5F5] data-[highlighted]:bg-[#333]',
        disabled && 'opacity-50 pointer-events-none',
        className,
      )}
    >
      {children}
    </Dropdown.Item>
  );
}

export function DropdownMenuLabel({ children, className }: { children: ReactNode; className?: string }) {
  return <Dropdown.Label className={cn('px-3 py-1.5 text-[10px] uppercase tracking-wide text-[#666]', className)}>{children}</Dropdown.Label>;
}