import { Button } from '@/Components/ui/button';
import { cn } from '@/lib/utils';
import { AnimatePresence, motion } from 'framer-motion';
import { LucideIcon, X } from 'lucide-react';

export type BulkAction = { label: string; icon?: LucideIcon; danger?: boolean; run: () => void };

export default function BulkBar({ count, actions, onClear }: { count: number; actions: BulkAction[]; onClear: () => void }) {
    return (
        <AnimatePresence>
            {count > 0 && (
                <motion.div
                    initial={{ opacity: 0, y: 24 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: 24 }}
                    transition={{ type: 'spring', stiffness: 420, damping: 34 }}
                    role="toolbar"
                    aria-label="Bulk actions"
                    className="glass fixed inset-x-3 bottom-4 z-40 mx-auto flex max-w-fit flex-wrap items-center justify-center gap-1.5 rounded-2xl border border-border p-2 shadow-lift lg:left-[calc(15rem+0.75rem)]"
                >
                    <span className="px-3 text-sm font-medium tabular-nums">{count} selected</span>
                    <span className="h-5 w-px bg-border" />
                    {actions.map(({ label, icon: Icon, danger, run }) => (
                        <Button key={label} variant="ghost" size="sm" onClick={run} className={cn(danger && 'text-destructive hover:text-destructive')}>{Icon && <Icon />}{label}</Button>
                    ))}
                    <Button variant="ghost" size="icon" onClick={onClear} aria-label="Clear selection" className="size-8"><X /></Button>
                </motion.div>
            )}
        </AnimatePresence>
    );
}