import { metaTitles } from "@/components/metaData/metaTitles";
import { Button } from "@/components/ui/buttons/Button";
import CustomImage from "@/components/ui/miscellaneous/CustomImage";
import { H3, P, S } from "@/components/ui/typography";
import { IBlog } from "@/models/Blog";
import { useTranslations } from "next-intl";
import Link from "next/link";

import React from "react";

const BlogPresentation = ({ blog }: { blog: IBlog }) => {
    const t = useTranslations()
    return (
        <section className="flex flex-col xl:flex-row justify-between items-center gap-20  bg-white p-4 rounded-md w-full">
            <div className="flex flex-col gap-4 2xl:pr-16">
                <div className="flex flex-col gap-4">
                    <S className="text-primary">{t(blog?.seo_title)}</S>
                    <H3>{t(blog?.title)}</H3>
                </div>
                <P>{t(blog?.short_description)}</P>
                <Link href={`/blog/${blog.slug}`} className="w-fit">
                    <Button url="" className="w-fit"><S className="">{t("Read article now")}</S></Button>
                </Link>
            </div>
            <CustomImage pageTitle={metaTitles?.landingMeta_Title} src={blog?.image_thumbnail} width={520} height={460} className="w-[520px] h-fit rounded-md object-cover" alt="blog" />

        </section>
    );
};

export default BlogPresentation;