Faq Help

"use client";

import { useId, useState } from "react";
import { Search } from "lucide-react";
import { cn } from "@/lib/utils";

export interface FaqHelpProps {
  title?: string;
  items?: { question: string; answer: string }[];
  popular?: string[];
  className?: string;
}

const DEFAULT_ITEMS = [
  { question: "How do I create a recurring task?", answer: "Open a task → Repeat → choose daily, weekly or a custom pattern." },
  { question: "How do I move a task to another board?", answer: "Drag it onto the board name in the sidebar, or use Move in the task menu." },
  { question: "Can I set my own reminder time?", answer: "Yes, in Settings → Notifications. Default is 9:00 the day before." },
  { question: "How do I export my boards?", answer: "Board menu → Export → CSV or JSON." },
  { question: "How do I invite a guest?", answer: "Share → Invite as guest. Guests only see the boards you pick." },
  { question: "How do I delete my account?", answer: "Settings → Account → Delete. We’ll email you a copy of your data first." },
];

/** Help-center FAQ: big friendly search pill with popular-search chips; matching questions appear as soft answer cards, with an empty state. */
export function FaqHelp({
  title = "Hi! How can we help? 👋",
  items = DEFAULT_ITEMS,
  popular = ["recurring", "export", "guest", "reminder"],
  className,
}: FaqHelpProps) {
  const [q, setQ] = useState("");
  const id = useId();
  const query = q.trim().toLowerCase();
  const results = items.filter((i) => `${i.question} ${i.answer}`.toLowerCase().includes(query));

  return (
    <section aria-labelledby={`${id}-t`} className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="mx-auto max-w-2xl rounded-[36px] bg-da-primary/12 px-6 py-12 text-center sm:px-12">
          <h2 id={`${id}-t`} className="font-da-display text-[clamp(1.75rem,4vw,2.75rem)] font-extrabold tracking-da-display">
            {title}
          </h2>
          <div className="relative mt-6">
            <Search aria-hidden className="pointer-events-none absolute top-1/2 left-5 size-5 -translate-y-1/2 text-da-muted-fg" />
            <label htmlFor={id} className="sr-only">
              Search help articles
            </label>
            <input
              id={id}
              type="search"
              value={q}
              onChange={(e) => setQ(e.target.value)}
              placeholder="Search for “recurring tasks”…"
              className="da-focus h-14 w-full rounded-da-pill bg-da-surface pr-5 pl-13 text-[15px] shadow-da-md placeholder:text-da-muted-fg"
            />
          </div>
          <div className="mt-4 flex flex-wrap justify-center gap-2">
            <span className="text-sm text-da-muted-fg">Popular:</span>
            {popular.map((p) => (
              <button
                key={p}
                type="button"
                onClick={() => setQ(p)}
                className="da-focus da-transition rounded-da-pill bg-da-surface px-3 py-1 text-sm font-medium hover:-translate-y-0.5"
              >
                {p}
              </button>
            ))}
          </div>
        </div>
        <p aria-live="polite" className="sr-only">
          {results.length} results
        </p>
        <ul className="mx-auto mt-8 grid max-w-3xl gap-3 sm:grid-cols-2">
          {results.map((it) => (
            <li key={it.question} className="rounded-da-lg bg-da-surface p-6 shadow-da-sm">
              <p className="font-da-display text-lg font-extrabold">{it.question}</p>
              <p className="mt-1.5 text-sm text-da-muted-fg">{it.answer}</p>
            </li>
          ))}
          {results.length === 0 && (
            <li className="rounded-da-lg bg-da-accent p-6 text-center text-da-accent-fg sm:col-span-2">
              No luck with “{q}” — try another word or message us, we’re nice. 🙂
            </li>
          )}
        </ul>
      </div>
    </section>
  );
}

export default FaqHelp;