"use client";

import { useState } from "react";
import Image from 'next/image';
import FaqArrow from '../../../../public/images/faq-arrow.svg';
import { FaqProps } from "@/types/homepage";


export default function Faqs({ title, heading, description, faqs = [] }: FaqProps) {
    const [activeIndex, setActiveIndex] = useState<number | null>(0);
    if (!heading && (!faqs || faqs.length === 0)) return null;

    const toggleFaq = (index: number) => {
        setActiveIndex(activeIndex === index ? null : index);
    };

    return (
        <section className="mb-16 md:mb-30">
            <div className="container">
                <div className="max-w-[846px] mx-auto">
                    <p className="text-[12px] md:text-[14px] text-[#334D72] font-medium mb-2 text-left md:text-center uppercase tracking-[0.5px]">
                        {title}
                    </p>
                    <h2 className="text-[32px] md:text-[48px] text-[#00204F] font-medium leading-[1.2] mb-4 text-left md:text-center">
                        {heading}
                    </h2>
                    <p className="text-[16px] md:text-[20px] text-left text-[#334D72] md:text-center mb-10 md:mb-12">
                        {description}
                    </p>

                    <div className="space-y-4">
                        {faqs?.map((item, index) => {
                            const isOpen = activeIndex === index;
                            // Attach non-breaking space before question mark so '?' never wraps to a new line alone
                            const formattedQuestion = item.questions
                                ? item.questions.replace(/(\S+)\s*(\?)/g, "$1\u00A0$2")
                                : "";

                            return (
                                <div
                                    key={index}
                                    className="overflow-hidden rounded-2xl bg-[#F3F5F8] transition-all duration-300"
                                >
                                    <button
                                        onClick={() => toggleFaq(index)}
                                        className="flex w-full items-center justify-between p-4 sm:p-5 md:px-6 md:py-5 text-left cursor-pointer gap-3"
                                    >
                                        <span className="text-[16px] md:text-[20px] font-bold text-[#00204F] flex-1 pr-2">
                                            {formattedQuestion}
                                        </span>
                                        <Image src={FaqArrow} width={20} height={20} alt={"chrome down arrow"} className={`shrink-0 ${isOpen ? "rotate-180" : ""
                                            }`}
                                        />
                                    </button>

                                    <div
                                        className={`grid transition-all duration-500 ease-in-out ${isOpen
                                            ? "grid-rows-[1fr] opacity-100"
                                            : "grid-rows-[0fr] opacity-0"
                                            }`}
                                    >
                                        <div className="overflow-hidden">
                                            <p className="text-[14px] md:text-[18px] font-normal text-[#334D72] px-4  md:px-6 pb-5 leading-[1.4] ">
                                                {item.answers}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        </section>
    );
}