import { Button } from '@/components/ui/Button';
import { Panel } from '@/components/ui/Panel';

export interface EmptyStateProps {
  readonly query: string;
  readonly onClear: () => void;
}

export function EmptyState({ onClear, query }: EmptyStateProps) {
  return (
    <Panel className="flex min-h-[360px] flex-col items-center justify-center px-6 py-14 text-center">
      <div className="flex size-16 items-center justify-center rounded-3xl border border-accent/35 bg-accent/12 text-accent shadow-glow">
        <svg className="size-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
          <path d="M10 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z" />
          <path d="m15 15 5 5" strokeLinecap="round" />
          <path d="M7 10h6" strokeLinecap="round" />
        </svg>
      </div>

      <h2 className="mt-6 text-2xl font-black tracking-[-0.03em] text-foreground">
        No machines match this view
      </h2>
      <p className="mt-3 max-w-xl text-sm leading-6 text-muted">
        {query.trim()
          ? `No registry entries match “${query.trim()}” with the active filters.`
          : 'The active filters remove every machine from the catalogue.'}{' '}
        Clear the filters or broaden the search terms to continue exploring.
      </p>

      <Button className="mt-6" variant="primary" onClick={onClear}>
        Clear filters
      </Button>
    </Panel>
  );
}