"use client"

import { Plus, Trash2 } from "lucide-react"

export interface FAQItem {
  question: string
  answer: string
}

interface FAQSectionProps {
  items: FAQItem[]
  onChange: (items: FAQItem[]) => void
  title?: string
  onTitleChange?: (v: string) => void
}

export function FAQSection({ items, onChange, title = "", onTitleChange }: FAQSectionProps) {
  function addItem() {
    onChange([...items, { question: "", answer: "" }])
  }

  function removeItem(index: number) {
    onChange(items.filter((_, i) => i !== index))
  }

  function updateItem(index: number, field: keyof FAQItem, val: string) {
    onChange(items.map((item, i) => (i === index ? { ...item, [field]: val } : item)))
  }

  return (
    <div className="flex flex-col gap-3">
      <div className="flex flex-col gap-3">
  
  <div>
    <label
      htmlFor="article-faq-heading"
      className="text-xs font-bold text-foreground font-sans uppercase tracking-wider"
    >
      FAQ
    </label>

    <input
      id="article-faq-heading"
      type="text"
      value={title}
      onChange={(e) => onTitleChange?.(e.target.value)}
      placeholder="Enter FAQ section title..."
      className="w-full bg-card border border-border rounded-xl px-4 py-2.5 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673] transition-colors"
    />
  </div>

  <div className="flex justify-end">
    <button
      type="button"
      onClick={addItem}
      className="flex cursor-pointer items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-semibold font-sans transition-all hover:brightness-105 active:scale-[0.98]"
      style={{ background: "rgba(43,182,115,0.10)", color: "var(--brand-green)" }}
    >
      <Plus className="w-3.5 h-3.5" aria-hidden="true" />
      Add Question
    </button>
  </div>

</div>

      {items.length === 0 ? (
        <div
          className="flex flex-col items-center justify-center gap-2 py-8 rounded-xl border border-dashed"
          style={{ borderColor: "var(--border)" }}
        >
          <p className="text-xs  text-muted-foreground font-sans">No FAQ items yet.</p>
          <button
            type="button"
            onClick={addItem}
            className="text-xs cursor-pointer font-semibold font-sans"
            style={{ color: "var(--brand-green)" }}
          >
            Add your first question
          </button>
        </div>
      ) : (
        <div className="flex flex-col gap-3">
          {items.map((item, index) => (
            <div
              key={index}
              className="flex flex-col gap-2 p-4 rounded-xl border border-border bg-card"
            >
              <div className="flex items-center justify-between gap-2">
                <span
                  className="text-xs font-bold font-sans px-2 py-0.5 rounded-md"
                  style={{ background: "rgba(29,45,104,0.08)", color: "var(--brand-navy)" }}
                >
                  Q{index + 1}
                </span>
                <button
                  type="button"
                  onClick={() => removeItem(index)}
                  className="p-1.5 cursor-pointer rounded-lg text-muted-foreground hover:text-red-500 hover:bg-red-50 transition-colors"
                  aria-label={`Remove FAQ item ${index + 1}`}
                >
                  <Trash2 className="w-3.5 h-3.5" aria-hidden="true" />
                </button>
              </div>
              <input
                type="text"
                value={item.question}
                onChange={(e) => updateItem(index, "question", e.target.value)}
                placeholder="Enter question..."
                className="w-full bg-muted border border-border rounded-xl px-3 py-2 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673] transition-colors"
                aria-label={`FAQ item ${index + 1} question`}
              />
              <textarea
                value={item.answer}
                onChange={(e) => updateItem(index, "answer", e.target.value)}
                placeholder="Enter answer..."
                rows={3}
                className="w-full bg-muted border border-border rounded-xl px-3 py-2 text-sm text-foreground font-sans placeholder:text-muted-foreground outline-none focus:ring-2 focus:ring-[#2BB673]/30 focus:border-[#2BB673] transition-colors resize-none leading-relaxed"
                aria-label={`FAQ item ${index + 1} answer`}
              />
            </div>
          ))}
        </div>
      )}
    </div>
  )
}