'use client'
import { FC } from 'react'
import HeroSection from './HeroSection'
import Category from './Category'
import BigBlogItem from './BigBlogItem'
import MostVisited from './MostVisited'
import ContactUs from './ContactUs'
import { useGetBlogs } from '../hooks/useBlogsData'
import { useBlogStore } from '../store/BlogStore'
import { useGetAds } from '@/app/ads/hooks/useAdsData'
import { AdsDisplayLocation } from '@/app/ads/types/AdsTypes'
import Image from 'next/image'
const BlogList: FC = () => {

    const { selectedCategory } = useBlogStore()
    const { data } = useGetBlogs(selectedCategory)
    const getAds = useGetAds(AdsDisplayLocation.BLOG_PAGE_TOP_RIGHT)
    const getAdsBottom = useGetAds(AdsDisplayLocation.BLOG_PAGE_BOTTOM_RIGHT)

    return (
        <div className=''>
            <HeroSection />

            <h1 className='text-2xl font-bold mt-10'>
                مجله داناک
            </h1>

            <div className='mt-10 flex xl:flex-row flex-col gap-8'>
                <div className='xl:w-[261px] w-full'>
                    <Category />


                    {
                        getAds.isSuccess && getAds.data.data.ads[0] &&
                        <a href={getAds.data?.data?.ads[0].link} target='_blank' className='mt-11 relative flex w-full aspect-square bg-white rounded-4xl overflow-hidden'>
                            <Image
                                alt={getAds.data.data.ads[0].title}
                                width={261}
                                height={550}
                                src={getAds.data.data.ads[0].imageUrl}
                                className='w-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'>
                                    {getAds.data.data.ads[0].title}
                                </div>
                            </div>
                        </a>
                    }

                    {
                        getAdsBottom.isSuccess && getAdsBottom.data.data.ads[0] &&
                        <a href={getAdsBottom.data?.data?.ads[0].link} target='_blank' className='flex-1 mt-11 bg-white relative rounded-4xl min-h-[500px] overflow-hidden flex'>
                            <Image
                                alt={getAdsBottom.data.data.ads[0].title}
                                width={261}
                                height={550}
                                src={getAdsBottom.data.data.ads[0].imageUrl}
                                className='w-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'>
                                    {getAdsBottom.data.data.ads[0].title}
                                </div>
                            </div>
                        </a>
                    }

                </div>

                <div className='flex-1 flex flex-col gap-8'>
                    {data?.data.blogs.map((item) => (
                        <BigBlogItem key={item.id} item={item} />
                    ))}
                </div>

                <div className='xl:w-[261px] w-full'>
                    <MostVisited />
                    <div className='mt-6'>
                        <ContactUs />
                    </div>
                    <div className='mt-6'>
                        <MostVisited />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default BlogList