'use client';

import { Sparkles } from 'lucide-react';

import { cn } from '@djangocfg/ui-core/lib';

export interface EmptyStateProps {
  greeting?: string;
  description?: string;
  suggestions?: Array<{ label: string; prompt: string }>;
  onPickSuggestion?: (prompt: string) => void;
  className?: string;
}

export function EmptyState({
  greeting,
  description,
  suggestions,
  onPickSuggestion,
  className,
}: EmptyStateProps) {
  return (
    <div className={cn('flex flex-col items-center gap-3 px-4 py-12 text-center', className)}>
      <div className="grid size-10 place-items-center rounded-full bg-muted">
        <Sparkles aria-hidden className="size-5 text-muted-foreground" />
      </div>
      {greeting ? (
        <h2 className="text-base font-semibold text-foreground">{greeting}</h2>
      ) : null}
      {description ? (
        <p className="max-w-md text-sm text-muted-foreground">{description}</p>
      ) : null}
      {suggestions?.length ? (
        <div className="mt-2 grid w-full max-w-md grid-cols-1 gap-2 sm:grid-cols-2">
          {suggestions.map((s) => (
            <button
              key={s.prompt}
              type="button"
              onClick={() => onPickSuggestion?.(s.prompt)}
              className="rounded-lg border border-border bg-background/60 px-3 py-2 text-left text-xs text-foreground hover:bg-accent hover:text-accent-foreground"
            >
              {s.label}
            </button>
          ))}
        </div>
      ) : null}
    </div>
  );
}