import BlogItem from '@/components/BlogItem'
import Image from 'next/image'
import { FC } from 'react'
import { useGetBlogCombined } from '../hooks/useBlogsData'
import { AdsDisplayLocation } from '@/app/ads/types/AdsTypes'
import { useGetAds } from '@/app/ads/hooks/useAdsData'
import Link from 'next/link'

const HeroSection: FC = () => {

    const { data } = useGetBlogCombined()
    const getAdsTopLeft = useGetAds(AdsDisplayLocation.BLOG_PAGE_TOP_LEFT)
    return (
        <div>
            <div className='flex gap-8 xl:mt-14 mt-8'>
                {
                    data?.data?.pinnedBlogs?.map((item, index: number) => {
                        if (index === 0) {
                            return (
                                <div key={item.id} className='relative flex-[2] rounded-4xl overflow-hidden h-fit bg-red-50'>
                                    <Image
                                        src={item.imageUrl}
                                        alt={item.title}
                                        width={1920}
                                        height={1080}
                                        className='w-full rounded-4xl object-cover  xl:min-h-[210px] min-h-[350px] max-h-[450px]'
                                    />

                                    <div className='absolute bottom-0 h-[140px] modalGlass3 w-full p-6 text-white'>
                                        <h4 className='font-bold xl:text-base text-sm'>
                                            <Link href={`/blogs/${item.slug}`}>
                                                {item.title}
                                            </Link>
                                        </h4>

                                        <div className="text-xs xl:text-sm mt-4 leading-7 truncate xl:text-clip xl:whitespace-normal line-clamp-2">
                                            {item.previewContent.replace(/<\/?[^>]+(>|$)/g, "")}
                                        </div>
                                    </div>
                                </div>
                            )
                        }
                    })
                }
                {
                    getAdsTopLeft.isSuccess && getAdsTopLeft.data.data.ads[0] &&
                    <a href={getAdsTopLeft.data?.data?.ads[0].link} target='_blank' className='flex-1 overflow-hidden relative hidden xl:flex bg-gray-100 rounded-4xl items-center justify-center'>
                        <Image
                            alt={getAdsTopLeft.data.data.ads[0].title}
                            width={261}
                            height={550}
                            src={getAdsTopLeft.data.data.ads[0].imageUrl}
                            className='w-full h-full backdrop-blur-[100px] aspect-square object-cover'
                        />

                        <div className='absolute flex items-center px-4 w-full bottom-0 h-[86px] bg-black bg-opacity-5 backdrop-blur-[14px]'>
                            <div className='max-w-[80%] text-sm leading-6 text-white'>
                                {getAdsTopLeft.data.data.ads[0].title}
                            </div>
                        </div>
                    </a>
                }
            </div>


            <div className='flex xl:flex-row flex-col gap-8 mt-10'>
                {
                    data?.data?.mostVisitedBlogs?.map((item, index: number) => {
                        if (index !== 0 && index < 4) {
                            return (
                                <BlogItem key={item.id} item={item} />
                            )
                        }
                    })
                }
            </div>
        </div>
    )
}

export default HeroSection