import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';

export function ProjectStatusBadge({
    status,
    className,
}: {
    status: string;
    className?: string;
}) {
    const config: Record<
        string,
        { label: string; className: string; dot: string }
    > = {
        completed: {
            label: 'Completed',
            className:
                'bg-emerald-50 text-emerald-700 border-emerald-200 dark:bg-emerald-950/40 dark:text-emerald-300 dark:border-emerald-900',
            dot: 'bg-emerald-500',
        },
        in_progress: {
            label: 'In Progress',
            className:
                'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950/40 dark:text-blue-300 dark:border-blue-900',
            dot: 'bg-blue-500',
        },
        active: {
            label: 'Active',
            className:
                'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950/40 dark:text-blue-300 dark:border-blue-900',
            dot: 'bg-blue-500',
        },
        review: {
            label: 'Review',
            className:
                'bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-950/40 dark:text-purple-300 dark:border-purple-900',
            dot: 'bg-purple-500',
        },
        on_hold: {
            label: 'On Hold',
            className:
                'bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-950/40 dark:text-amber-300 dark:border-amber-900',
            dot: 'bg-amber-500',
        },
        cancelled: {
            label: 'Cancelled',
            className:
                'bg-red-50 text-red-700 border-red-200 dark:bg-red-950/40 dark:text-red-300 dark:border-red-900',
            dot: 'bg-red-500',
        },
        draft: {
            label: 'Draft',
            className:
                'bg-neutral-50 text-neutral-600 border-neutral-200 dark:bg-neutral-900/50 dark:text-neutral-300 dark:border-neutral-700',
            dot: 'bg-neutral-400',
        },
    };

    const c = config[status?.toLowerCase()] || config.draft;

    return (
        <Badge
            variant="outline"
            className={cn(
                'flex w-fit items-center gap-1.5 font-medium transition-colors duration-200',
                c.className,
                className,
            )}
        >
            <span className={cn('h-1.5 w-1.5 rounded-full', c.dot)} />
            {c.label}
        </Badge>
    );
}