"use client"
import { IPricing } from "@/models/Pricing";
import { MaintenanceSection } from "@/components/sections";
import MultiSwitch from "@/components/ui/switch/MultiSwitch";
import { useState } from "react";
import PricingPlans from "./PricingPlans";
import { H3, S, } from "@/components/ui/typography";
import { useLocale, useTranslations } from "next-intl";
import { DoubleCheckSVG } from "@/assets/svg";
import { CircleAlert } from "lucide-react";
import PricingComparisons from "./PricingComparisons";

const PricingSections = ({ pricing }: { pricing: IPricing }) => {
    const [selectedId, setSelectedId] = useState<number>(0)
    const locale = useLocale()
    const isFr = locale === "fr"
    const t = useTranslations()

    return (
        <section>
            {pricing && pricing?.packages?.length > 0 ?
                <>
                    <section className='space-y-[56px] lg:space-y-[120px]'>
                        <div className="  flex items-center flex-col ">
                            <MultiSwitch onSelect={(value: number) => setSelectedId(value - 1)} pacakges={pricing?.packages} />
                        </div>
                        <div className="flex flex-col items-start gap-6">
                            <div className="flex max-lg:flex-col items-center gap-4">
                                <H3>{isFr ? pricing.packages[selectedId]?.packageNameFr : pricing.packages[selectedId]?.packageName}</H3>
                                {pricing.packages[selectedId].includedPackage &&
                                    <S className='bg-[#4FB277] !font-normal rounded-full px-3 p-1 text-center text-white !text-[12px] flex items-center gap-1'><DoubleCheckSVG className={"text-white w-4 h-4"} />{isFr ? pricing.packages[selectedId].includedPackageFR : pricing.packages[selectedId].includedPackage} {t("is included")}</S>
                                }
                            </div>
                            <PricingPlans selectedPackage={pricing.packages[selectedId]} currency={pricing?.currency} />
                            {pricing.packages[selectedId]?.packageNote &&
                                <div className="flex items-center gap-2 bg-[#E7F3FD] rounded-sm p-2 px-4">
                                    <CircleAlert className="text-primary" />
                                    <S className="text-primary !font-normal">{isFr ? pricing.packages[selectedId]?.packageNoteFR : pricing.packages[selectedId]?.packageNote}</S>
                                </div>
                            }
                        </div>
                        <PricingComparisons comparisons={pricing?.packages[selectedId].comparisons} plansList={pricing.packages[selectedId].plans} />
                    </section>
                </>
                :
                <MaintenanceSection />
            }
        </section>
    )
}

export default PricingSections