import YogaImageComponent from "@/components/yoga.image.component";
import {YogaSingleService_Plain} from "@/types/generated-strapi-interfaces/api/yoga-single-service";
import {StrapiFile} from "@/types/types";
import strapiApi from "@/api/strapi/strapi-api";
import styles from './our.services.item.component.module.css'
import Link from "next/link";

export interface Props {
    config: YogaSingleService_Plain
}

const OurServiceItemComponent = ({config: {header,description,image,name}}: Props) => {
    const imageFile: StrapiFile = image as StrapiFile;
    if (!imageFile || !imageFile.url) {
        return null
    }
    const path = '/services/' + name;
    return (

        <div className={styles.serviceSlide}>
        {/*<div className="col-lg-3 col-md-6 col-sm-6 col-xs-12">*/}
            <div className="services_box_content">
                <div className="services_box_upper_portion">
                    <figure className="mb-0">
                        <YogaImageComponent src={strapiApi.getImageUrl(imageFile.url)} alt="" className="img-fluid"/>
                    </figure>
                </div>
                <div className="services_box_lower_portion">
                    <h3>{header}</h3>
                    <p>{description}</p>
                    <div className="btn_wrapper">
                        <Link href={path} className="text-decoration-none"><i
                            className="fa-solid fa-arrow-right" aria-hidden="true"></i></Link>
                    </div>
                </div>
            </div>
        </div>

    );
}

export default OurServiceItemComponent;