"use client";

interface FAQ {
  question: string;
  answer: string;
}

interface Props {
  faqs: FAQ[];
  setFaqs: React.Dispatch<React.SetStateAction<FAQ[]>>;
}

export default function FaqEditor({
  faqs,
  setFaqs,
}: Props) {
  const updateFaq = (
    index: number,
    field: "question" | "answer",
    value: string
  ) => {
    const updated = [...faqs];
    updated[index][field] = value;
    setFaqs(updated);
  };

  const addFaq = () => {
    setFaqs([
      ...faqs,
      {
        question: "",
        answer: "",
      },
    ]);
  };

  const removeFaq = (index: number) => {
    setFaqs(faqs.filter((_, i) => i !== index));
  };

  return (
    <div className="space-y-6">

      <h2 className="text-xl font-bold">
        FAQs
      </h2>

      {faqs.map((faq, index) => (
        <div
          key={index}
          className="rounded-xl border p-5 space-y-4"
        >

          <input
            type="text"
            placeholder="Question"
            value={faq.question}
            onChange={(e) =>
              updateFaq(
                index,
                "question",
                e.target.value
              )
            }
            className="w-full rounded-xl border p-3"
          />

          <textarea
            rows={4}
            placeholder="Answer"
            value={faq.answer}
            onChange={(e) =>
              updateFaq(
                index,
                "answer",
                e.target.value
              )
            }
            className="w-full rounded-xl border p-3"
          />

          <button
            type="button"
            onClick={() => removeFaq(index)}
            className="rounded-lg bg-red-500 px-4 py-2 text-white hover:bg-red-600"
          >
            Remove FAQ
          </button>

        </div>
      ))}

      <button
        type="button"
        onClick={addFaq}
        className="rounded-xl bg-green-600 px-5 py-3 text-white hover:bg-green-700"
      >
        + Add FAQ
      </button>

    </div>
  );
}