import { BarChart3, FileText, Lightbulb } from "lucide-react";

const suggestions = [
  {
    icon: FileText,
    title: "Составь план проекта",
    prompt: "Составь план запуска нового корпоративного проекта",
  },
  {
    icon: BarChart3,
    title: "Сделай резюме отчёта",
    prompt: "Помоги сделать краткое резюме квартального отчёта",
  },
  {
    icon: Lightbulb,
    title: "Предложи идеи",
    prompt: "Предложи идеи для улучшения командной работы",
  },
] as const;

type ChatEmptyStateProps = {
  firstName: string;
  onSuggestion: (prompt: string) => void;
};

export function ChatEmptyState({ firstName, onSuggestion }: ChatEmptyStateProps) {
  return (
    <section className="chat-readable mx-auto flex w-full flex-1 flex-col items-center justify-center px-5 py-12 text-center">
      <div className="mb-5 grid size-12 place-items-center rounded-2xl bg-primary text-primary-foreground">
        <span aria-hidden="true" className="text-lg font-semibold">
          AI
        </span>
      </div>
      <h1 className="text-2xl font-semibold tracking-tight md:text-3xl">
        Чем я могу помочь?
      </h1>
      <p className="mt-2 text-sm font-medium">Здравствуйте, {firstName}!</p>
      <p className="mt-2 max-w-lg text-sm leading-6 text-muted-foreground">
        Выберите пример или задайте свой вопрос — ответ появится прямо в чате.
      </p>
      <div className="mt-8 grid w-full gap-3 sm:grid-cols-3">
        {suggestions.map(({ icon: Icon, prompt, title }) => (
          <button
            className="rounded-xl border bg-card p-4 text-left text-card-foreground outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
            key={title}
            onClick={() => onSuggestion(prompt)}
            type="button"
          >
            <Icon aria-hidden="true" className="mb-3 size-4 text-muted-foreground" />
            <span className="text-sm font-medium">{title}</span>
          </button>
        ))}
      </div>
    </section>
  );
}