import BlogItem from '@/components/BlogItem'
import Image from 'next/image'
import { FC } from 'react'
import { useGetBlogCombined } from '../hooks/useBlogsData'

const HeroSection: FC = () => {

    const { data } = useGetBlogCombined()

    return (
        <div>
            {
                data?.data?.pinnedBlogs?.map((item, index: number) => {
                    if (index === 0) {
                        return (
                            <div key={item.id} className='relative rounded-4xl overflow-hidden'>
                                <Image
                                    src={item.imageUrl}
                                    alt={item.title}
                                    width={1920}
                                    height={1080}
                                    className='w-full rounded-4xl object-cover xl:mt-14 mt-8 xl:min-h-[210px] min-h-[350px]'
                                />

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

                                    <p dangerouslySetInnerHTML={{ __html: item.previewContent }} className="text-xs xl:text-sm mt-4 leading-7 truncate xl:text-clip xl:whitespace-normal">
                                    </p>
                                </div>
                            </div>
                        )
                    }
                })
            }


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

export default HeroSection