import { Building, ClipboardList, CalendarClock, Mail, Phone, Video } from 'lucide-react';
import { TimelineItem as TimelineItemType } from './types';

interface StatusBadge {
    label: string;
    variant: string;
    icon: React.ReactNode;
}

interface StatusBadgesProps {
    item: TimelineItemType;
}

/**
 * Data-driven status badges configuration
 * This replaces the hardcoded JSX with configurable data
 */
const statusBadgeConfig: Record<string, (item: TimelineItemType) => StatusBadge[]> = {
    task: () => [
        {
            label: 'In Progress',
            variant: 'border-blue-200 bg-blue-50 text-blue-700',
            icon: <ClipboardList className="h-3 w-3" />,
        },
        {
            label: 'High Priority',
            variant: 'border-purple-200 bg-purple-50 text-purple-700',
            icon: <CalendarClock className="h-3 w-3" />,
        },
    ],
    email: () => [
        {
            label: 'Sent',
            variant: 'border-emerald-200 bg-emerald-50 text-emerald-700',
            icon: <Mail className="h-3 w-3" />,
        },
        {
            label: 'Business',
            variant: 'border-amber-200 bg-amber-50 text-amber-700',
            icon: <Building className="h-3 w-3" />,
        },
    ],
    call: (item: TimelineItemType) => [
        {
            label: 'Completed',
            variant: 'border-cyan-200 bg-cyan-50 text-cyan-700',
            icon: <Phone className="h-3 w-3" />,
        },
        {
            label: '45 min',
            variant: 'border-slate-200 bg-slate-50 text-slate-700',
            icon: <CalendarClock className="h-3 w-3" />,
        },
    ],
    meeting: () => [
        {
            label: 'Scheduled',
            variant: 'border-purple-200 bg-purple-50 text-purple-700',
            icon: <Video className="h-3 w-3" />,
        },
        {
            label: 'Conference Room A',
            variant: 'border-indigo-200 bg-indigo-50 text-indigo-700',
            icon: <Building className="h-3 w-3" />,
        },
    ],
    reminder: () => [
        {
            label: 'Upcoming',
            variant: 'border-orange-200 bg-orange-50 text-orange-700',
            icon: <CalendarClock className="h-3 w-3" />,
        },
    ],
};

export default function StatusBadges({ item }: StatusBadgesProps) {
    const getBadges = statusBadgeConfig[item.type];

    // If no config found for this type, return null (no badges)
    if (!getBadges) {
        return null;
    }

    const badges = getBadges(item);

    return (
        <div className="mt-3 flex flex-wrap gap-2">
            {badges.map((badge, index) => (
                <span
                    key={index}
                    className={`inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[10px] font-semibold ${badge.variant}`}
                >
                    {badge.icon}
                    {badge.label}
                </span>
            ))}
        </div>
    );
}