import {YogaPriceComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-price-component";
import {PriceItemComponent} from "@/components/price.item.component";


export interface Props{
    config: YogaPriceComponent_Plain
}

const PricingComponent = ({config: { title,header,description,prices}}: Props) => {
    return (
        <section className="pricing_plans_section">
            <div className="container">
                <div className="row">
                    <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div className="pricing_plans_content">
                            <h5>{title}</h5>
                            <h2>{header}</h2>
                            <p>{description}</p>
                        </div>
                    </div>
                </div>
                <div className="row" data-aos="fade-up">
                    {
                        prices.map(value => <PriceItemComponent key={value.id}  config={value} />)
                    }
                {/*    <div className="col-lg-4 col-md-4 col-sm-6 col-xs-12">*/}
                {/*        <div className="pricing_plans_box_content">*/}
                {/*            <div className="pricing_plans_box_upper_portion">*/}
                {/*                <figure className="pricing_plans_image mb-0">*/}
                {/*                    <YogaImageComponent src="/assets/images/pricing_plan_1.png" alt="" className="img-fluid"/>*/}
                {/*                </figure>*/}
                {/*                <div className="pricing_plans_box_image_content">*/}
                {/*                    <figure className="mb-0">*/}
                {/*                        <YogaImageComponent src="/assets/images/pricing_plan_icon_1.png" alt="" className="img-fluid"/>*/}
                {/*                    </figure>*/}
                {/*                </div>*/}
                {/*            </div>*/}
                {/*            <div className="pricing_plans_box_lower_portion">*/}
                {/*                <h3>Standard</h3>*/}
                {/*                <ul className="list-unstyled">*/}
                {/*                    <li>*/}
                {/*                        <i className="fa-solid fa-check" aria-hidden="true"></i>Pay as you go*/}
                {/*                    </li>*/}
                {/*                    <li>*/}
                {/*                        <i className="fa-solid fa-check" aria-hidden="true"></i>Perfect for*/}
                {/*                        non-residence*/}
                {/*                    </li>*/}
                {/*                </ul>*/}
                {/*                <div className="pricing_plans_span_wrapper">*/}
                {/*                    <span className="price">$30</span>*/}
                {/*                    <span className="per_month">/per month</span>*/}
                {/*                </div>*/}
                {/*                <div className="btn_wrapper">*/}
                {/*                    <a className="enroll_now_btn text-decoration-none" href="/pricing.html">Enroll*/}
                {/*                        Now</a>*/}
                {/*                </div>*/}
                {/*            </div>*/}
                {/*        </div>*/}
                {/*    </div>*/}
                {/*    <div className="col-lg-4 col-md-4 col-sm-6 col-xs-12">*/}
                {/*        <div className="pricing_plans_box_content">*/}
                {/*            <div className="pricing_plans_box_upper_portion">*/}
                {/*                <figure className="pricing_plans_image mb-0">*/}
                {/*                    <YogaImageComponent src="/assets/images/pricing_plan_2.png" alt="" className="img-fluid"/>*/}
                {/*                </figure>*/}
                {/*                <div className="pricing_plans_box_image_content">*/}
                {/*                    <figure className="mb-0">*/}
                {/*                        <YogaImageComponent src="/assets/images/pricing_plan_icon_2.png" alt="" className="img-fluid"/>*/}
                {/*                    </figure>*/}
                {/*                </div>*/}
                {/*            </div>*/}
                {/*            <div className="pricing_plans_box_lower_portion second_lower_portion">*/}
                {/*                <h3>Professional</h3>*/}
                {/*                <ul className="list-unstyled">*/}
                {/*                    <li>*/}
                {/*                        <i className="fa-solid fa-check" aria-hidden="true"></i>Short-term comitment*/}
                {/*                    </li>*/}
                {/*                    <li>*/}
                {/*                        <i className="fa-solid fa-check" aria-hidden="true"></i>Online training for all*/}
                {/*                    </li>*/}
                {/*                </ul>*/}
                {/*                <div className="pricing_plans_span_wrapper">*/}
                {/*                    <span className="price">$120</span>*/}
                {/*                    <span className="per_month">/per month</span>*/}
                {/*                </div>*/}
                {/*                <div className="btn_wrapper">*/}
                {/*                    <a className="enroll_now_btn text-decoration-none" href="/pricing.html">Enroll*/}
                {/*                        Now</a>*/}
                {/*                </div>*/}
                {/*            </div>*/}
                {/*        </div>*/}
                {/*    </div>*/}
                {/*    <div className="col-lg-4 col-md-4 col-sm-6 col-xs-12">*/}
                {/*        <div className="pricing_plans_box_content">*/}
                {/*            <div className="pricing_plans_box_upper_portion">*/}
                {/*                <figure className="pricing_plans_image mb-0">*/}
                {/*                    <YogaImageComponent src="/assets/images/pricing_plan_3.png" alt="" className="img-fluid"/>*/}
                {/*                </figure>*/}
                {/*                <div className="pricing_plans_box_image_content">*/}
                {/*                    <figure className="mb-0">*/}
                {/*                        <YogaImageComponent src="/assets/images/pricing_plan_icon_3.png" alt="" className="img-fluid"/>*/}
                {/*                    </figure>*/}
                {/*                </div>*/}
                {/*            </div>*/}
                {/*            <div className="pricing_plans_box_lower_portion third_lower_portion">*/}
                {/*                <h3>Private</h3>*/}
                {/*                <ul className="list-unstyled">*/}
                {/*                    <li>*/}
                {/*                        <i className="fa-solid fa-check" aria-hidden="true"></i>Long-term comitment*/}
                {/*                    </li>*/}
                {/*                    <li>*/}
                {/*                        <i className="fa-solid fa-check" aria-hidden="true"></i>24/7 Available*/}
                {/*                    </li>*/}
                {/*                </ul>*/}
                {/*                <div className="pricing_plans_span_wrapper">*/}
                {/*                    <span className="price">$250</span>*/}
                {/*                    <span className="per_month">/per month</span>*/}
                {/*                </div>*/}
                {/*                <div className="btn_wrapper">*/}
                {/*                    <a className="enroll_now_btn text-decoration-none" href="/pricing.html">Enroll*/}
                {/*                        Now</a>*/}
                {/*                </div>*/}
                {/*            </div>*/}
                {/*        </div>*/}
                {/*    </div>*/}
                </div>
            </div>
        </section>
    );
}

export default PricingComponent;