import { Badge } from '@/components/ui/badge';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuRadioGroup,
    DropdownMenuRadioItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';

type StatusOption = { value: string; label: string };

type StatusBadgeProps = {
    status: string | null | undefined;
    statuses: StatusOption[];
    onChange: (status: string) => void;
    disabled?: boolean;
    variants?: Record<
        string,
        'default' | 'secondary' | 'destructive' | 'outline'
    >;
};

export function StatusBadge({
    status,
    statuses,
    onChange,
    disabled,
    variants,
}: StatusBadgeProps) {
    const label =
        statuses.find((option) => option.value === status)?.label ??
        status ??
        '-';
    const variant = (status && variants?.[status]) || 'outline';

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild disabled={disabled}>
                <button
                    type="button"
                    disabled={disabled}
                    className="cursor-pointer rounded-full border-0 bg-transparent p-0 outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-default disabled:opacity-70"
                >
                    <Badge variant={variant}>{label}</Badge>
                </button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
                <DropdownMenuRadioGroup
                    value={status ?? ''}
                    onValueChange={onChange}
                >
                    {statuses.map((option) => (
                        <DropdownMenuRadioItem
                            key={option.value}
                            value={option.value}
                        >
                            {option.label}
                        </DropdownMenuRadioItem>
                    ))}
                </DropdownMenuRadioGroup>
            </DropdownMenuContent>
        </DropdownMenu>
    );
}