import Image from "next/image"
import MainLink from "../shared/main-link"
import { Icon } from "@iconify/react"
import BlogTags from "./BlogTags"
import { getTranslations } from "next-intl/server"

const BlogCard = async ({ blogData, locale }: { blogData: any; locale: string }) => {
    const t = await getTranslations("Blog")

    return (
        <div className="rounded overflow-hidden scale_animation">
            <div className="max-h-[250px] overflow-hidden rounded-2xl">
                {blogData?.image?.original_url ? (
                    <Image
                      loading="eager"
                        className="w-full h-full object-cover"
                        src={blogData.image.original_url}
                        width={800}
                        height={600}
                        alt={blogData?.title || "Blog Image"}
                    />
                ) : (
                    <div className="w-full h-[250px] bg-gray-200 flex items-center justify-center">
                        <Icon icon="mdi:image-off" className="text-gray-500 text-4xl" />
                    </div>
                )}
            </div>

            <div className="px-1 py-4">
                {blogData?.tags?.length > 0 && <BlogTags tags={blogData.tags} />}

                <div className="py-2 text-paragText">{blogData?.date || t("No Date Available")}</div>

                <div className="pb-4">
                    <h2 className="font-medium text-xl mb-2">{blogData?.title || t("Untitled Blog")}</h2>
                    <p className="text-gray-700 text-base line-clamp-3" dangerouslySetInnerHTML={{__html:blogData?.description}} />
                        
                </div>

                <div className="py-4">
                    <MainLink
                        href={`blogs/${blogData?.slug || "#"}`}
                        locale={locale}
                        className="!text-[#A37130] hover:!text-[#A37130]/80"
                    >
                        <span className="flex gap-3 items-center">
                            {t("Read More")}
                            <Icon icon="fa6-solid:arrow-right-long" />
                        </span>
                    </MainLink>
                </div>
            </div>
        </div>
    )
}

export default BlogCard