import { Link } from '@inertiajs/react';

export type HomePlan = {
    name: string;
    description: string;
    price: string;
    period: string;
    features: string[];
    iconUrl: string;
};

export type HomePricingGroups = {
    monthly: HomePlan[];
    yearly: HomePlan[];
};

function PlanCard({ plan }: { plan: HomePlan }) {
    return (
        <div className="col-lg-6 col-md-6">
            <div className="pricing-item">
                <div className="pricing-icon-box">
                    <div className="pricing-icon">
                        <figure>
                            <img src={plan.iconUrl} alt="" />
                        </figure>
                    </div>
                    <p className="pricing-plan-title line-anime">{plan.name}</p>
                </div>
                <div className="pricing-content">
                    <div className="pricing-text">
                        <p className="desc">{plan.description}</p>
                        <div className="pricing-plan-price-box">
                            <p>Starting at:</p>
                            <h3 className="pricing-plan-price">
                                TZS {plan.price}
                                <span>/{plan.period}</span>
                            </h3>
                        </div>
                    </div>
                    {plan.features.length > 0 && (
                        <div className="pricing-included-list">
                            <p>What&apos;s included?</p>
                            <div className="check-list">
                                <ul>
                                    {plan.features.map((feature) => (
                                        <li key={feature}>{feature}</li>
                                    ))}
                                </ul>
                            </div>
                        </div>
                    )}
                    <div className="pricing-button-wapper">
                        <Link href="/book" className="theme-button style-1 w-100" aria-label="Choose Plan">
                            Choose Plan
                        </Link>
                    </div>
                </div>
            </div>
        </div>
    );
}

export function HomePricing({ pricing }: { pricing: HomePricingGroups }) {
    if (pricing.monthly.length === 0 && pricing.yearly.length === 0) {
        return null;
    }

    return (
        <>
                <section className="pricing-section-1">
                    <div className="pricing-shape-top">
                        <figure>
                            <img src="/assets/images/shape/shape-two-bottom.png" alt="pricing shape two bottom" />
                        </figure>
                    </div>
                    <div className="pricing-wapper pt-100 md-pt-80 pb-70 md-pb-50">
                        <div className="container">
                            <div className="row justify-content-between">
                                <div className="col-xl-5 col-lg-12">
                                    <div className="pricing-title-box wow fadeInUp" data-wow-delay=".2s">
                                        <div className="section-title section-title-white">
                                            <span className="sub-title">Plans &amp; Pricing</span>
                                            <h2 className="line-anime">Our Pricing is simple no hidden fees</h2>
                                        </div>
                                        <div className="pricing-tabs text-start">
                                            <nav>
                                                <div className="nav nav-tabs" id="nav-tab" role="tablist">
                                                    <button className="nav-link active" id="nav-monthly-tab" data-bs-toggle="tab" data-bs-target="#nav-monthly" type="button" role="tab" aria-controls="nav-monthly" aria-selected="true">Monthly</button>
                                                    <button className="nav-link" id="nav-yearly-tab" data-bs-toggle="tab" data-bs-target="#nav-yearly" type="button" role="tab" aria-controls="nav-yearly" aria-selected="false">Yearly</button>
                                                </div>
                                            </nav>
                                        </div>
                                        <div className="pricing-question mb-40">
                                            <p>Have a Question about plan? <Link href="/contact">Let&apos;s Talk?</Link></p>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-xl-7 col-lg-12">
                                    <div className="tab-content wow fadeInUp" data-wow-delay=".3s">
                                        <div className="tab-pane fade active show" id="nav-monthly" role="tabpanel" aria-labelledby="nav-monthly-tab" tabIndex={0}>
                                            <div className="row">
                                                {pricing.monthly.map((plan) => (
                                                    <PlanCard plan={plan} key={`month-${plan.name}`} />
                                                ))}
                                            </div>
                                        </div>
                                        <div className="tab-pane fade" id="nav-yearly" role="tabpanel" aria-labelledby="nav-yearly-tab" tabIndex={0}>
                                            <div className="row">
                                                {pricing.yearly.map((plan) => (
                                                    <PlanCard plan={plan} key={`year-${plan.name}`} />
                                                ))}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
        </>
    );
}