import {
  ChevronDown,
  Check,
  Loader,
  XIcon,
  // EyeOffIcon,
} from 'lucide-react';

import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  // DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

export function StatusDropDown({
  id,
  currentStatus,
  setStatus,
  className,
  isLoading,
}: {
  id: number;
  currentStatus: string;
  setStatus: (id: number, status: string) => void;
  className?: string;
  isLoading?: boolean;
}) {
  return (
    <div className={cn('flex items-center space-x-2 text-xs', className)}>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            variant="category"
            size="sm"
            className={
              currentStatus === 'done'
                ? 'bg-green-200 border-green-500 text-green-800 hover:bg-green-300 focus-visible:ring-0'
                : currentStatus === 'pending'
                ? 'border-amber-500 bg-amber-200 text-amber-800 hover:bg-amber-300 focus-visible:ring-0'
                : currentStatus === 'rejected'
                ? 'bg-red-200 border-red-500 text-red-800 hover:bg-red-300 focus-visible:ring-0'
                : '' + `-ml-3 h-8 rounded-md`
            }
            isLoading={isLoading}
            loadingSpinner={false}
          >
            <div className="flex items-center justify-between">
              <span>{currentStatus}</span>
              <ChevronDown className="pl-2 " />
            </div>
          </Button>
          {/* <Button
            variant="ghost"
            size="sm"
            className="data-[state=open]:bg-secondary -ml-3 h-8 rounded-md"
          >
            <span>{currentStatus}</span>
          </Button> */}
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start">
          <DropdownMenuItem
            onClick={() => setStatus(id, 'done')}
            className="cursor-pointer group hover:text-green-500"
          >
            <Check className="mr-2 h-3.5 w-3.5 text-muted-foreground/70 group-hover:text-green-500" />
            Done
          </DropdownMenuItem>
          <DropdownMenuItem
            onClick={() => setStatus(id, 'pending')}
            className="cursor-pointer group hover:text-accent-foreground"
          >
            <Loader className="mr-2 h-3.5 w-3.5 text-muted-foreground/70 group-hover:text-accent-foreground" />
            Pending
          </DropdownMenuItem>
          <DropdownMenuItem
            onClick={() => setStatus(id, 'rejected')}
            className="cursor-pointer group hover:text-red-500"
          >
            <XIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70 group-hover:text-red-500" />
            Rejected
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}