import {
    Accordion,
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from "@/components/ui/accordion/CustomAccordion"
import { useTranslations } from "next-intl";
import { H5, P, } from "../typography";
import { Dot } from "lucide-react";
import { ReactNode } from "react";
interface IPrimaryAccordionProps {
    items: {
        icon?:ReactNode
        title: string,
        description: string,
        descriptionPoints?:{pointTitle?:string,pointDescription:string}[]
        descriptionPoints2?:{pointTitle?:string,pointDescription:string}[]
        descriptionPoints3?:{pointTitle?:string,pointDescription:string}[]
        descriptionPoints4?:{pointTitle?:string,pointDescription:string}[]
        descriptionPoints5?:{pointTitle?:string,pointDescription:string}[]
        descriptionPoints6?:{pointTitle?:string,pointDescription:string}[]
        description2?: string,
        description3?: string,
        description4?: string,
        description5?: string,
        description6?: string,
        description7?: string,
    }[];
}
export default function PrimaryAccordion({ items }: IPrimaryAccordionProps) {
    const t = useTranslations()
    return (
        <Accordion type="single" collapsible className="w-full   flex flex-col gap-2" >
            {items.map((item, index) => (
                <AccordionItem key={index} value={`item-${index + 1}`} className="bg-lightBackground py-0 px-4 lg:p-4  rounded-lg shadow-sm">
                    <AccordionTrigger className="text-left  hover:no-underline " > <H5 className="flex items-center gap-2">{item.icon}{t(item.title)}</H5></AccordionTrigger>
                    <AccordionContent><P>{t(item.description)}</P></AccordionContent>
                    {item.descriptionPoints &&
                        <AccordionContent >
                            <ul className="">
                                {item.descriptionPoints?.map((point, index) => (
                                    <li key={index} className="flex  items-start  mb-1 list-disc marker:text-muted-foreground">
                                        <Dot className="min-w-8 min-h-8" />
                                        <P className="text-muted-foreground font-normal">
                                            {point?.pointTitle && <span className="text-foreground font-semibold">{t(point?.pointTitle)} :</span>}  {t(point.pointDescription)}
                                        </P>
                                    </li>
                                ))}
                            </ul>
                        </AccordionContent>
                    }
                    {item.description2 && <AccordionContent><P>{t(item.description2)}</P></AccordionContent>}
                    {item.descriptionPoints2 &&
                        <AccordionContent >
                            <ul className="">
                                {item.descriptionPoints2?.map((point, index) => (
                                    <li key={index} className="flex  items-start  mb-1 list-disc marker:text-muted-foreground">
                                        <Dot className="min-w-8 min-h-8" />
                                        <P className="text-muted-foreground font-normal">
                                            {point?.pointTitle && <span className="text-foreground font-semibold">{t(point?.pointTitle)} :</span>}  {t(point.pointDescription)}
                                        </P>
                                    </li>
                                ))}
                            </ul>
                        </AccordionContent>
                    }
                    {item.description3 && <AccordionContent><P>{t(item.description3)}</P></AccordionContent>}
                    {item.descriptionPoints3 &&
                        <AccordionContent >
                            <ul className="">
                                {item.descriptionPoints3?.map((point, index) => (
                                    <li key={index} className="flex  items-start  mb-1 list-disc marker:text-muted-foreground">
                                        <Dot className="min-w-8 min-h-8" />
                                        <P className="text-muted-foreground font-normal">
                                            {point?.pointTitle && <span className="text-foreground font-semibold">{t(point?.pointTitle)} :</span>}  {t(point.pointDescription)}
                                        </P>
                                    </li>
                                ))}
                            </ul>
                        </AccordionContent>
                    }
                    {item.description4 && <AccordionContent><P>{t(item.description4)}</P></AccordionContent>}
                    {item.descriptionPoints4 &&
                        <AccordionContent >
                            <ul className="">
                                {item.descriptionPoints4?.map((point, index) => (
                                    <li key={index} className="flex  items-start  mb-1 list-disc marker:text-muted-foreground">
                                        <Dot className="min-w-8 min-h-8" />
                                        <P className="text-muted-foreground font-normal">
                                            {point?.pointTitle && <span className="text-foreground font-semibold">{t(point?.pointTitle)} :</span>}  {t(point.pointDescription)}
                                        </P>
                                    </li>
                                ))}
                            </ul>
                        </AccordionContent>
                    }
                    {item.description5 && <AccordionContent><P>{t(item.description5)}</P></AccordionContent>}
                    {item.descriptionPoints5 &&
                        <AccordionContent >
                            <ul className="">
                                {item.descriptionPoints5?.map((point, index) => (
                                    <li key={index} className="flex  items-start  mb-1 list-disc marker:text-muted-foreground">
                                        <Dot className="min-w-8 min-h-8" />
                                        <P className="text-muted-foreground font-normal">
                                            {point?.pointTitle && <span className="text-foreground font-semibold">{t(point?.pointTitle)} :</span>}  {t(point.pointDescription)}
                                        </P>
                                    </li>
                                ))}
                            </ul>
                        </AccordionContent>
                    }
                    {item.description6 && <AccordionContent><P>{t(item.description6)}</P></AccordionContent>}
                    {item.descriptionPoints6 &&
                        <AccordionContent >
                            <ul className="">
                                {item.descriptionPoints6?.map((point, index) => (
                                    <li key={index} className="flex  items-start  mb-1 list-disc marker:text-muted-foreground">
                                        <Dot className="min-w-8 min-h-8" />
                                        <P className="text-muted-foreground font-normal">
                                            {point?.pointTitle && <span className="text-foreground font-semibold">{t(point?.pointTitle)} :</span>}  {t(point.pointDescription)}
                                        </P>
                                    </li>
                                ))}
                            </ul>
                        </AccordionContent>
                    }
                    {item.description7 && <AccordionContent><P>{t(item.description7)}</P></AccordionContent>}
                </AccordionItem>

            ))}
        </Accordion>
    )
}