import { PricePlanCard } from '@/components/ui/cards'
import {Package } from '@/models/Pricing'

interface IPricingPlans {
    selectedPackage: Package
    currency: string
}
const PricingPlans = ({ selectedPackage, currency }: IPricingPlans) => {
    // const [isYearly, setisYearly] = useState(true)
    return (
        <section className='flex flex-col gap-10 sm:gap-24 '>
            {/* <div className='flex flex-col sm:flex-row items-center justify-center gap-6 text-center'>
                <H3>{t("Check out our offers and find the ideal plan")}</H3>
                <div className='flex  items-center gap-2'>
                    <S className={`${isYearly ? "text-muted-foreground" : "text-primary"} duration-500`}>{t("Monthly")}</S>
                    <Switch checked={isYearly} onCheckedChange={() => setisYearly(!isYearly)} id="airplane-mode" />
                    <S className={`${isYearly ? "text-primary" : "text-muted-foreground"} duration-500`}>{t("Yearly")}</S>
                </div>
            </div> */}
            <ul className='grid max-sm:grid-cols-1 lg:grid-cols-3 gap-6'>
                {selectedPackage && selectedPackage?.plans?.map((plan, i) => (
                    <PricePlanCard selectedPackage={selectedPackage} key={i} plan={plan} currency={currency} />
                ))}
            </ul>
        </section>
    )
}

export default PricingPlans