import React from 'react'
import { H2, H6, } from '@/components/ui/typography'
import { ParticlesSVG } from '@/assets/svg'
import { IBlogDetails } from '@/models/Blog'
import { Calendar, Clock } from 'lucide-react'
import { useTranslations } from 'next-intl'

const BlogDetailsHero = ({ BlogDetails }: { BlogDetails: IBlogDetails }) => {
    const t = useTranslations()
    return (
        <main className="flex flex-col px-2 justify-center items-center gap-10 bg-lightBackground py-32 relative overflow-hidden">
            <ParticlesSVG className={"max-lg:hidden absolute right-48 bottom-14  scale-[2] z-[0]"} />
            <ParticlesSVG className={"absolute left-0 top-0 sm:top-8  lg:left-48 lg:top-14  scale-[-1] sm:scale-[-1.5] lg:scale-[-2]  z-[0]"} />
            <div className=' flex flex-col gap-2 items-center  text-center z-[1]' >
                {BlogDetails?.tag && <H6 className=' text-primary '>{BlogDetails?.tag}</H6>}
                <H2 className='max-w-[800px]'>{`"${BlogDetails?.title}"`}</H2>
                <div className="flex items-center gap-20 mt-2">
                    {BlogDetails.posted_at && (
                        <div className="flex items-center gap-4 font-medium">
                            <Calendar className="text-primary w-6 h-6" />
                            {BlogDetails.posted_at?.split("00")[0]}
                        </div>
                    )}
                    {BlogDetails.readingTime && (
                        <div className="flex items-center gap-4">
                            <Clock className="text-primary w-6 h-6" />
                            {BlogDetails.readingTime} {t("mins read")}
                        </div>
                    )}
                </div>
            </div>
        </main>
    )
}

export default BlogDetailsHero