import { metaTitles } from "@/components/metaData/metaTitles";
import { Button } from "@/components/ui/buttons/Button";
import { CustomCard } from "@/components/ui/cards";
import CustomImage from "@/components/ui/miscellaneous/CustomImage";
import { H5, H6, S } from "@/components/ui/typography";
import { IBlog } from "@/models/Blog";
import { ArrowUp, } from "lucide-react";
import { getLocale, getTranslations } from "next-intl/server";

import Link from "next/link";
import React from "react";
interface BlogLatestArticlesPresentationProps {
    latestArticles: IBlog[]
    searchQuery?: string
}
const BlogLatestArticlesPresentation = async ({ latestArticles, searchQuery }: BlogLatestArticlesPresentationProps) => {
    const t = await getTranslations('')
    const locale = await getLocale()
 
    return (
        <section className="flex flex-col  gap-4">
            <H5>{searchQuery ? `${t("Search results for")}  ${searchQuery}` : t("Latest blogs")} :</H5>
            <ul className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {latestArticles.map((article, index) => (
                    <CustomCard key={index} className=" flex flex-col gap-4 p-4 border-none shadow-lg ">
                        <Link href={locale === "en" ? `/en/blog/${article?.slug}` : `/blog/${article?.slug}`} className="w-full h-[220px] overflow-hidden rounded-md " >
                            <CustomImage pageTitle={metaTitles?.blogsMeta_Title} src={article?.image_large ? article?.image_large : "https://dadycar.com/DadyCarBanner.jpg"} width={400} height={220} className=" object-cover h-[220px] hover:scale-105 duration-300 " alt={`${article.slug}`} />
                        </Link>
                        <div className="flex flex-col gap-2">
                            {/* // slug */}
                            <S className="text-primary ">{article?.tag}</S>
                            <H6 className="">{article?.title}</H6>
                            <S className="text-muted-foreground !font-normal">{article?.short_description}</S>
                        </div>
                        <Link href={locale === "en" ? `/en/blog/${article?.slug}` : `/blog/${article?.slug}`} className="w-fit">
                            <Button variant={"outline"} url="" className="w-fit flex items-center gap-2 group"><S>{t("Read article now")}</S> <ArrowUp className="group-hover:text-primary group-hover:-translate-y-[2px] group-hover:translate-x-[2px] duration-150 min-w-5 min-h-5 rotate-45" /></Button>
                        </Link>
                    </CustomCard>
                ))}

            </ul>
        </section>
    );
};

export default BlogLatestArticlesPresentation;