"use client";

import { Button } from "@/components/ui/Button";

interface GenrePickerProps {
  // 备选题材（来自 lib/wizard/wizard.ts 的 GENRES）。
  genres: readonly string[];
  // 当前点选题材（未选 = null）。
  value: string | null;
  // 点选某题材（点已选项亦回传该值，交由上层决定是否切换）。
  onPick: (genre: string) => void;
  // 可选：关闭/跳过采集卡。
  onDismiss?: () => void;
}

// 极轻 genre 采集卡（WFW-7）：一组 chips 让作者点本次写作题材，
// 杜绝无题材 slop。纯展示，选中态用 aria-pressed 标注。
export function GenrePicker({
  genres,
  value,
  onPick,
  onDismiss,
}: GenrePickerProps) {
  return (
    <div className="border-b border-line bg-panel px-4 py-3 sm:px-6">
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <p className="font-serif text-base text-ink">先选个题材</p>
          <p className="mt-0.5 text-sm text-ink-soft">
            本项目还没定题材，点一个题材再写，本次生成会更贴合、少套话。
          </p>
        </div>
        {onDismiss ? (
          <Button onClick={onDismiss} variant="secondary" size="sm">
            跳过
          </Button>
        ) : null}
      </div>
      <div
        className="mt-3 flex flex-wrap gap-2"
        role="group"
        aria-label="本章题材"
      >
        {genres.map((genre) => {
          const active = genre === value;
          return (
            <Button
              key={genre}
              type="button"
              aria-pressed={active}
              onClick={() => onPick(genre)}
              variant={active ? "outline" : "secondary"}
              size="sm"
            >
              {genre}
            </Button>
          );
        })}
      </div>
    </div>
  );
}