import { Sparkles } from "lucide-react";

export function ExamplePrompts({
  title,
  prompts,
  onPick,
}: {
  title: string;
  prompts: string[];
  onPick: (p: string) => void;
}) {
  return (
    <div className="max-w-md text-center">
      <div className="mx-auto mb-3 flex h-11 w-11 items-center justify-center rounded-xl bg-primary/10 text-primary">
        <Sparkles className="h-5 w-5" />
      </div>
      <h2 className="mb-1 text-lg font-semibold">{title}</h2>
      <p className="mb-4 text-sm text-muted-foreground">Try one of these to get started</p>
      <div className="flex flex-col gap-2">
        {prompts.map((p) => (
          <button
            key={p}
            onClick={() => onPick(p)}
            className="rounded-lg border border-border bg-card px-3 py-2 text-left text-sm transition-colors hover:border-primary/60 hover:bg-muted"
          >
            {p}
          </button>
        ))}
      </div>
    </div>
  );
}