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

export interface Props {
    post: YogaBlogPost_Plain & {documentId?: string}
}

const BlogSinglePostComponent = ({post: {header,teaserImage,tags,documentId} }: Props) => {
    const teaserFile: StrapiFile = teaserImage as StrapiFile;
    const tagText = tags?.length ? tags[0].tag : null;
    return (
        <div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <div className="blog_posts_image position-relative">
                <figure className="mb-0">
                    <YogaImageComponent src={strapiApi.getImageUrl( teaserFile?.url )   } alt=""
                                                             className="img-fluid"/>
                </figure>
                <div className="blog_posts_image_content">
                    <span>{tagText}</span>
                    <h4>{header}</h4>
                    <div className="icon_wrapper">
                        <a href={"/blog/"+documentId} className="text-decoration-none"><i
                            className="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default BlogSinglePostComponent;