import { Button } from '@/components/ui/button';
import { Bell, Calendar, CheckCircle2, Loader2, Mail, NotebookPen, Phone, Plus, StickyNote } from 'lucide-react';
export const TAB_CONFIGS: TabConfig[] = [
    // {
    //     value: 'activity',
    //     label: 'Activity',
    //     icon: Grid2x2,
    //     emptyIcon: Grid2x2,
    //     emptyMessage: 'No data found!',
    //     loadMoreText: 'Load More Activities',
    // },
    { value: 'task', label: 'Task', icon: CheckCircle2, emptyIcon: CheckCircle2, emptyMessage: 'No tasks yet', loadMoreText: 'Load More Tasks' },
    { value: 'note', label: 'Note', icon: NotebookPen, emptyIcon: StickyNote, emptyMessage: 'No notes yet', loadMoreText: 'Load More Notes' },
    { value: 'reminders', label: 'Reminders', icon: Bell, emptyIcon: Bell, emptyMessage: 'No reminders yet', loadMoreText: 'Load More Reminders' },
    { value: 'emails', label: 'Emails', icon: Mail, emptyIcon: Mail, emptyMessage: 'No emails yet', loadMoreText: 'Load More Emails' },
    { value: 'calls', label: 'Calls', icon: Phone, emptyIcon: Phone, emptyMessage: 'No calls yet', loadMoreText: 'Load More Calls' },
    {
        value: 'meetings',
        label: 'Meetings',
        icon: Calendar,
        emptyIcon: Calendar,
        emptyMessage: 'No meetings yet',
        loadMoreText: 'Load More Meetings',
    },
];

export const LoadingState = ({ message = 'Loading activities...' }: { message?: string }) => (
    <div className="flex items-center justify-center py-12">
        <Loader2 className="h-8 w-8 animate-spin text-primary" />
        <span className="ml-2 text-sm text-slate-600">{message}</span>
    </div>
);

export const EmptyState = ({ config, showAddButton = false }: { config: TabConfig; showAddButton?: boolean }) => {
    const EmptyIcon = config.emptyIcon;
    return (
        <div className="py-12 text-center">
            <EmptyIcon className="mx-auto mb-3 h-12 w-12 text-slate-300" />
            <p className="text-sm text-slate-500">{config.emptyMessage}</p>
            {showAddButton && (
                <Button size="sm" className="mt-4">
                    <Plus className="mr-1.5 h-4 w-4" />
                    Add {config.label}
                </Button>
            )}
        </div>
    );
};