import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { AlertTriangle, type LucideIcon } from 'lucide-react';
import * as React from 'react';

/*
 * Mismo layout que `EmptyState` pero con tono de error: ícono de alerta sobre
 * fondo `destructive-soft` en vez de `muted`, y `onRetry` obligatorio — un
 * estado de error sin forma de reintentar deja al usuario varado, así que acá
 * no es opcional como en `EmptyState`.
 */
export interface ErrorStateProps {
    icon?: LucideIcon;
    title?: string;
    description?: string;
    onRetry: () => void;
    retryLabel?: string;
    className?: string;
}

function ErrorState({
    icon: Icon = AlertTriangle,
    title = 'Algo salió mal',
    description = 'No se pudo cargar la información. Intentá de nuevo.',
    onRetry,
    retryLabel = 'Reintentar',
    className,
}: ErrorStateProps) {
    return (
        <div className={cn('px-6 py-12 text-center', className)}>
            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-destructive-soft text-destructive">
                <Icon className="h-6 w-6" />
            </div>
            <h3 className="mt-4 text-base font-semibold tracking-tight text-foreground">{title}</h3>
            <p className="mx-auto mt-2 max-w-md text-base leading-relaxed text-muted-foreground sm:text-sm">
                {description}
            </p>
            <div className="mt-5 flex justify-center">
                <Button variant="outline" onClick={onRetry}>
                    {retryLabel}
                </Button>
            </div>
        </div>
    );
}

export { ErrorState };