import { cn } from '#/lib/utils.js';

/**
 * What a listing shows when it holds nothing: an icon, a title, and a line
 * of guidance, centred in the room the rows would take. `action` is the one
 * thing a reader can do about it, under the words.
 */
export function EmptyState({ icon, title, description, action, className }) {
  return (
    <div
      className={cn(
        'mx-auto flex max-w-md flex-col items-center justify-center gap-2 px-(--gutter) py-16 text-center',
        className,
      )}
    >
      {icon && (
        <div className="mb-1 flex size-10 shrink-0 items-center justify-center rounded-lg border border-border bg-muted text-faint [&_svg]:size-5">
          {icon}
        </div>
      )}
      {title && (
        <div className="font-semibold text-[14px] text-foreground">{title}</div>
      )}
      {description && (
        <p className="text-[13px] text-muted-foreground leading-relaxed">
          {description}
        </p>
      )}
      {action && <div className="mt-3">{action}</div>}
    </div>
  );
}