import {YogaPrice_Plain} from "@/types/generated-strapi-interfaces/api/yoga-price";
import YogaImageComponent from "@/components/yoga.image.component";
import {StrapiFile} from "@/types/types";
import strapiApi from "@/api/strapi/strapi-api";

export interface Props{
    config: YogaPrice_Plain
}

export function PriceItemComponent({config: {header,option1,option2,price,icon, image,buttonText}} : Props){
    // there are some issues with the strapi generated types
    const iconFile: StrapiFile = icon as StrapiFile;
    const imageFile: StrapiFile = image as StrapiFile;
    console.info("image:",strapiApi.getImageUrl(imageFile?.url));
    return (
        <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={strapiApi.getImageUrl(imageFile?.url)} alt="" className="img-fluid"/>
                    </figure>
                    <div className="pricing_plans_box_image_content">
                        <figure className="mb-0">
                            <YogaImageComponent src={strapiApi.getImageUrl(iconFile?.url)} alt=""
                                                className="img-fluid"/>
                        </figure>
                    </div>
                </div>
                <div className="pricing_plans_box_lower_portion">
                    <h3>{header}</h3>
                    <ul className="list-unstyled">
                        <li>
                            <i className="fa-solid fa-check" aria-hidden="true"></i>{option1}
                        </li>
                        <li>
                            <i className="fa-solid fa-check" aria-hidden="true"></i>{option2}
                        </li>
                    </ul>
                    <div className="pricing_plans_span_wrapper">
                        <span className="price">{price} FT</span>
                        <span className="per_month">/per month</span>
                    </div>
                    <div className="btn_wrapper">
                        <a className="enroll_now_btn text-decoration-none" href="/pricing.html">{buttonText}</a>
                    </div>
                </div>
            </div>
        </div>
    );
}