import YogaImageComponent from "@/components/yoga.image.component";
import {BlockWithImageComponentProps} from "@/components/block.with.image.component";
import NextBlocksRenderer from "@/components/next.blocks.renderer";
import styles from './block.with.right.image.component.module.css';
import clsx from "clsx";

export default function BlockWithRightImage({
                                              id,  title, header, block, button, image: {
        url,
    },
                                            }: BlockWithImageComponentProps) {


    return (
        <section className={clsx("block_with_right_image_section","block_with_image","block_with_right_image")} id={id}>
            <div className="container">
                <div className="block_with_image_box">
                    <div className="row">
                        <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-aos="fade-up">
                            <div className={ clsx("block_with_right_image_content","block-with-image-content","block-with-right-image-content")}>
                                {
                                    url && <div className="block_with_right_image_image d-lg-block d-md-block d-sm-none d-xs-none d-none">
                                        <figure className="mb-0">
                                            <YogaImageComponent src={url} alt=""
                                                                                     className={clsx("img-fluid", "float-right", styles.rightImage)}/>
                                        </figure>
                                    </div>
                                }
                                {title && <h5>{title}</h5>}
                                {header && <h2>{header}</h2>}
                                <NextBlocksRenderer content={block}/>
                                <div className="btn_wrapper">
                                    {button && <a href={button.link}
                                                  className="text-decoration-none read_more_btn">{button.label}</a>}
                                </div>
                            </div>
                        </div>
                        { url && <div className="block_with_right_image_image d-lg-none d-md-none col-sm-12 col-xs-12">
                                <figure className="mb-0">
                                    <YogaImageComponent src={url} alt=""
                                                        className={clsx("img-fluid", "float-right", styles.rightImage)}/>
                                </figure>
                        </div>
                        }
                    </div>
                </div>
                <figure className="block_with_right_image_right_shape right_shape mb-0">
                    <YogaImageComponent src="./assets/images/our_block_with_image_shape.png" alt="" className="img-fluid"/>
                </figure>
            </div>
        </section>
    )
}