import { cn } from '@/lib/utils';
import type { LucideIcon } from 'lucide-react';
import * as React from 'react';

/*
 * Réplica visual de `DashboardEmptyState` (`dashboard-page.tsx`): mismo
 * círculo de ícono, mismos tamaños de texto, mismo espaciado. Se define acá
 * aparte, sin migrar ni reexportar ese componente todavía — esa decisión la
 * toma el agente que ya está tocando `dashboard-page.tsx` en paralelo, para
 * no pisarle el archivo.
 */
export interface EmptyStateProps {
    icon?: LucideIcon;
    title: string;
    description?: string;
    action?: React.ReactNode;
    className?: string;
}

function EmptyState({ icon: Icon, title, description, action, className }: EmptyStateProps) {
    return (
        <div className={cn('px-6 py-12 text-center', className)}>
            {Icon ? (
                <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-muted text-muted-foreground">
                    <Icon className="h-6 w-6" />
                </div>
            ) : null}
            <h3 className={cn('text-base font-semibold tracking-tight text-foreground', Icon && 'mt-4')}>
                {title}
            </h3>
            {description ? (
                <p className="mx-auto mt-2 max-w-md text-base leading-relaxed text-muted-foreground sm:text-sm">
                    {description}
                </p>
            ) : null}
            {action ? <div className="mt-5 flex justify-center">{action}</div> : null}
        </div>
    );
}

export { EmptyState };