"use client";

import React, { useState } from 'react';
import styles from './Pricing.module.css';
import { Check } from 'lucide-react';

interface PricingPlan {
    name: string;
    priceMonthly: string;
    priceYearly: string;
    desc: string;
    features: string[];
    cta: string;
    popular: boolean;
    link: string;
}

interface PricingClientProps {
    plans: PricingPlan[];
}

const PricingClient = ({ plans }: PricingClientProps) => {
    const [isAnnual, setIsAnnual] = React.useState(true);

    return (
        <div className={styles.container}>
            <h2 className={styles.title}>Simple, transparent pricing</h2>
            <p className={styles.subtitle}>Choose the plan that's right for you</p>

            <div className={styles.toggleWrapper}>
                <span className={`${styles.period} ${!isAnnual ? styles.active : ''}`}>Monthly</span>
                <button
                    className={`${styles.toggle} ${isAnnual ? styles.toggled : ''}`}
                    onClick={() => setIsAnnual(!isAnnual)}
                >
                    <div className={styles.handle}></div>
                </button>
                <span className={`${styles.period} ${isAnnual ? styles.active : ''}`}>
                    Yearly <span className={styles.saveTag}>Save more</span>
                </span>
            </div>

            <div className={styles.grid}>
                {plans.map((plan, index) => (
                    <div key={index} className={`${styles.card} ${plan.popular ? styles.popular : ''}`}>
                        {plan.popular && <div className={styles.popularTag}>Most Popular</div>}
                        <h3 className={styles.planName}>{plan.name}</h3>
                        <div className={styles.price}>
                            <span className={styles.currency}>৳</span>
                            {isAnnual ? plan.priceYearly : plan.priceMonthly}
                            <span className={styles.duration}>{isAnnual ? '/yr' : '/mo'}</span>
                        </div>
                        <p className={styles.desc}>{plan.desc}</p>
                        <a href={plan.link} className={plan.popular ? styles.btnPrimary : styles.btnOutline}>{plan.cta}</a>
                        <ul className={styles.features}>
                            {plan.features.map((feature, i) => (
                                <li key={i}>
                                    <Check size={16} className={styles.checkIcon} /> {feature}
                                </li>
                            ))}
                        </ul>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default PricingClient;