import { AlertTriangle, Bell, Calendar, CreditCard, Users, Wrench } from 'lucide-react';
import { type NotificationFilter } from '@/hooks/use-notifications';

const EMPTY_COPY: Record<NotificationFilter, { icon: React.ElementType; title: string; body: string }> = {
    all: {
        icon: Bell,
        title: 'All caught up',
        body: 'No notifications right now. Check back later.',
    },
    bookings: {
        icon: Calendar,
        title: 'No booking alerts',
        body: 'New bookings, cancellations, and reschedules will appear here.',
    },
    payments: {
        icon: CreditCard,
        title: 'No payment alerts',
        body: 'Failed charges, new memberships, and refund requests will appear here.',
    },
    operations: {
        icon: Wrench,
        title: 'No operational alerts',
        body: 'Technician assignments, completions, and route issues will appear here.',
    },
    system: {
        icon: AlertTriangle,
        title: 'No system alerts',
        body: 'Availability warnings and integration errors will appear here.',
    },
    customers: {
        icon: Users,
        title: 'No customer alerts',
        body: 'New registrations, membership upgrades, and flagged reviews will appear here.',
    },
};

interface NotificationEmptyProps {
    filter: NotificationFilter;
}

export function NotificationEmpty({ filter }: NotificationEmptyProps) {
    const { icon: Icon, title, body } = EMPTY_COPY[filter];

    return (
        <div className="flex flex-col items-center justify-center gap-3 px-6 py-16 text-center">
            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-muted">
                <Icon className="h-5 w-5 text-muted-foreground" />
            </div>
            <div>
                <p className="text-sm font-medium text-foreground">{title}</p>
                <p className="mt-1 text-xs text-muted-foreground">{body}</p>
            </div>
        </div>
    );
}