import YogaImageComponent from "@/components/yoga.image.component";
import {
    YogaSubscribeNowComponent_Plain
} from "@/types/generated-strapi-interfaces/api/yoga-subscribe-now-component";
import clsx from "clsx";
import {StrapiFile} from "@/types/types";
import strapiApi from "@/api/strapi/strapi-api";
import styles from './subscribe.component.module.css'

export interface Props{
    config: YogaSubscribeNowComponent_Plain,
    styleClass?: string,
}
const SubscribeComponent = ({
                                config: {title,header,placeHolderEmail,buttonSubscribeLabel, image = undefined},
    styleClass
}: Props) => {
    const imageFile: StrapiFile = image as StrapiFile;
    if (!imageFile || !imageFile.url) {
        return null
    }
    return (
        <section className={clsx("subscribe_section",styleClass)}>
            <div className="container">
                <div className="subscribe_background_image">
                    <div className="row">
                        <div className="col-lg-7 col-md-7 col-sm-6 col-xs-12" data-aos="fade-right">
                            <div className="subscribe_content">
                                <h5>{title}</h5>
                                <h2>{header}</h2>
                                <form method="POST">
                                    <div className="form-row">
                                        <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                            <input type="email" name="email" id="emailadd" className="form-control"
                                                   placeholder={placeHolderEmail}/>
                                            <button type="submit" name="btnsubmit" id="submitbutton">{buttonSubscribeLabel}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div className="col-lg-5 col-md-5 col-sm-6 col-xs-12">
                            <figure  className={clsx(styles.roundedImage,"subscribe_image","mb-0",)}>
                                <YogaImageComponent   src={strapiApi.getImageUrl(imageFile.url)} alt=""/>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    );
}

export default SubscribeComponent;