import type { FC, ReactNode } from 'react';
import { Inbox } from 'lucide-react';
import { cn } from '../../lib/utils';
import { Button } from './Button';

interface EmptyStateProps {
  title?: string;
  subtitle?: string;
  icon?: ReactNode;
  actionLabel?: string;
  onAction?: () => void;
  className?: string;
}

export const EmptyState: FC<EmptyStateProps> = ({
  title = 'Sin resultados',
  subtitle = 'No hay datos para mostrar en este momento.',
  icon,
  actionLabel,
  onAction,
  className,
}) => {
  return (
    <div className={cn('flex flex-col items-center justify-center py-12 text-center', className)}>
      <div className="w-14 h-14 rounded-full bg-[#FEF3C7] flex items-center justify-center text-[#A87B5D] mb-4">
        {icon ?? <Inbox size={28} />}
      </div>
      <h4 className="font-heading text-lg text-homenest-bark mb-1">{title}</h4>
      <p className="text-sm text-[#7A5C44] max-w-xs mx-auto mb-4">{subtitle}</p>
      {actionLabel && onAction && (
        <Button variant="outline" size="sm" onClick={onAction}>
          {actionLabel}
        </Button>
      )}
    </div>
  );
};

export default EmptyState;
