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

export interface Props{
    config: YogaTextWithImageComponent_Plain
}
export default function TextWithRightImage ({config: {
    title,header,image,description,button
}}: Props){

    const strapiFile = image as StrapiFile;
    const imageUrl = strapiApi.getImageUrl(strapiFile?.url)

    return (
        <section className="mission_section">
            <div className="container">
                <div className="mission_box">
                    <div className="row">
                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12" data-aos="fade-up">
                            <div className="mission_content">
                                <h5>{title}</h5>
                                <h2>{header}</h2>
                                <p>{description}</p>
                                <div className="btn_wrapper">
                                    {button && <a href={button.link} className="text-decoration-none read_more_btn">{button.label}</a>}
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                            <div className="mission_image">
                                <figure className="mb-0"><YogaImageComponent src={imageUrl} alt="" className="img-fluid" /></figure>
                            </div>
                        </div>
                    </div>
                </div>
                <figure className="mission_right_shape right_shape mb-0">
                    <YogaImageComponent src="./assets/images/our_mission_shape.png" alt="" className="img-fluid" />
                </figure>
            </div>
        </section>
    )
}