"use client";

import { useState } from "react";

type FaqItem = {
  question: string;
  answer: string;
};

const faqs: FaqItem[] = [
  {
    question: "How do I receive money on Coast?",
    answer:
      "To receive money, go to the Account tab and select Virtual Account. Copy your bank details and share them with the sender.Funds sent to this account will be credited instantly to your Coast wallet.",
  },
  {
    question: "Are deposits instant?",
    answer:
      "Yes, all deposits made to your virtual account are credited immediately once the transfer is successful.",
  },
  {
    question: "Are there fees for receiving money?",
    answer:
      "Yes, a transaction fee of 1% of the deposited amount applies, capped at ₦1,000 per transaction.",
  },
  {
    question: "Is there a limit on how much I can receive?",
    answer:
      "Yes, the daily deposit limit is ₦49,999. If you receive more than this within 24 hours, you may be required to provide proof of funds and additional KYC documents before the funds are released.",
  },
  {
    question: "How do I send money on Coast?",
    answer:
      "To send money, go to the Home tab, select Transfer, enter the recipient’s username, input the amount and a short description, and tap Proceed to complete the transfer.",
  },
  {
    question: "Who can I send money to?",
    answer:
      "You can send money to friends and family who are on Coast using their username.",
  },
];

function Chevron({ open }: { open: boolean }) {
  return (
    <svg
      width="14"
      height="14"
      viewBox="0 0 14 14"
      fill="none"
      aria-hidden
      className={`transition-transform ${open ? "rotate-180" : ""}`}
    >
      <path
        d="M3 5L7 9L11 5"
        stroke="#1f5cff"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

function FaqRow({
  item,
  open,
  onToggle,
}: {
  item: FaqItem;
  open: boolean;
  onToggle: () => void;
}) {
  return (
    <div className="rounded-2xl bg-white shadow-[0_2px_10px_-4px_rgba(2,16,58,0.08)]">
      <button
        type="button"
        onClick={onToggle}
        aria-expanded={open}
        className="flex w-full items-center justify-between gap-6 px-6 py-5 text-left md:px-8 md:py-6"
      >
        <span className="text-[16px] font-bold text-coast-navy md:text-[18px]">
          {item.question}
        </span>
        <span
          className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-full transition ${open ? "bg-chevron-bg" : "bg-chevron-bg"
            }`}
        >
          <Chevron open={open} />
        </span>
      </button>
      <div
        className={`grid transition-all duration-300 ${open ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
          }`}
      >
        <div className="overflow-hidden">
          <p className="px-6 pb-6 text-[15px] leading-relaxed text-coast-navy/85 md:px-8 md:pb-7 md:text-base">
            {item.answer}
          </p>
        </div>
      </div>
    </div>
  );
}

export default function FAQ() {
  const [openIndex, setOpenIndex] = useState<number | null>(0);

  return (
    <section className="bg-[#F6F8FB]">
      <div className="mx-auto max-w-[860px] px-5 py-16 md:px-10 md:py-24">
        <h2 className="text-center text-[28px] font-bold text-coast-navy md:text-[36px]">
          Frequently Asked Questions
        </h2>

        <div className="mt-10 flex flex-col gap-4 md:mt-12">
          {faqs.map((item, i) => (
            <FaqRow
              key={i}
              item={item}
              open={openIndex === i}
              onToggle={() => setOpenIndex(openIndex === i ? null : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}