import type { DsProps } from './props';
import * as React from 'react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';

/**
 * EmptyState — what a region shows when it has nothing to show.
 *
 * Deliberately distinguishes two situations that need different copy and
 * different actions:
 *
 * - `empty`    — nothing exists yet. Offer the action that creates the first one.
 * - `filtered` — things exist but none match. Offer to clear the filters.
 *
 * Pages that conflate them end up telling a user with 22 candidates that they
 * have no candidates.
 */
/** @param {any} props */
export function EmptyState({
  icon: Icon,
  title,
  description,
  /** Primary action — a <Button>, or `{ label, onClick }`. */
  action,
  secondaryAction,
  variant = 'empty',
  size = 'default',
  className,
}: DsProps) {
  const renderAction = (spec, buttonVariant) => {
    if (!spec) return null;
    if (React.isValidElement(spec)) return spec;
    return (
      <Button variant={buttonVariant} size="sm" onClick={spec.onClick}>
        {spec.icon && <spec.icon aria-hidden="true" />}
        {spec.label}
      </Button>
    );
  };

  return (
    <div
      className={cn(
        'flex flex-col items-center justify-center text-center',
        size === 'sm' ? 'py-8 px-4' : size === 'lg' ? 'py-20 px-6' : 'py-14 px-6',
        className
      )}
    >
      {Icon && (
        <span
          className={cn(
            'grid place-items-center rounded-full mb-4',
            variant === 'filtered' ? 'bg-surface-sunken text-ink-4' : 'bg-krow-blue-tint text-krow-blue',
            size === 'sm' ? 'w-10 h-10' : 'w-14 h-14'
          )}
        >
          <Icon className={size === 'sm' ? 'w-5 h-5' : 'w-6 h-6'} aria-hidden="true" />
        </span>
      )}

      <h3 className={cn('font-heading text-ink-1', size === 'sm' ? 'text-body' : 'text-title')}>
        {title}
      </h3>

      {description && (
        <p className="text-body-sm text-ink-3 mt-1.5 max-w-sm leading-relaxed">{description}</p>
      )}

      {(action || secondaryAction) && (
        <div className="flex items-center gap-2 mt-5">
          {renderAction(action, 'default')}
          {renderAction(secondaryAction, 'outline')}
        </div>
      )}
    </div>
  );
}