'use client'
import { Profile, Calendar } from 'iconsax-react'
import { FC } from 'react'
import Image from 'next/image'
// import MostVisited from '../components/MostVisited'
import ContactUs from '../components/ContactUs'
import { useGetBlogSingle } from '../hooks/useBlogsData'
import { toJalaliDate } from '@/config/func'
import MostVisited from './MostVisited'

type Props = {
    id: string
}

const SingleBlogPage: FC<Props> = ({ id }) => {

    const { data } = useGetBlogSingle(id)
    if (!data) return <div></div>
    return (
        <div className='mt-24 max-w-maxWidth mx-auto'>
            <h1 className='text-2xl font-bold'>
                {data?.data?.blog?.title}
            </h1>

            <div className='mt-10 flex gap-8'>
                <div className='flex-1 bg-white rounded-4xl p-10'>
                    <div className='flex gap-4'>
                        <div className='flex gap-1'>
                            <div className='size-5 overflow-hidden rounded-full'>
                                <Image
                                    src={data?.data?.blog?.category?.iconUrl}
                                    alt={data?.data?.blog?.category?.title}
                                    width={20}
                                    height={20}
                                />
                            </div>
                            <h6 className='text-[#7D818C] text-sm'>{data?.data?.blog?.category?.title}</h6>
                        </div>

                        <div className='flex gap-1'>
                            <Profile size={20} color='#7D818C' />
                            <h6 className='text-[#7D818C] text-sm'>{data?.data?.blog?.author.firstName} {data?.data?.blog?.author.lastName}</h6>
                        </div>

                        <div className='flex gap-1'>
                            <Calendar size={20} color='#7D818C' />
                            <h6 className='text-[#7D818C] text-sm'>{toJalaliDate(data?.data?.blog?.createdAt)}</h6>
                        </div>
                    </div>

                    <div className='mt-6'>
                        <Image
                            src={data?.data?.blog?.imageUrl}
                            alt={data?.data?.blog?.title}
                            width={1000}
                            height={1000}
                            className='w-full rounded-4xl max-h-[400px] object-cover'
                        />
                    </div>

                    <p dangerouslySetInnerHTML={{ __html: data?.data?.blog?.content }} className='mt-8 text-sm leading-6'>

                    </p>

                    <div className='mt-6 flex gap-4 border-y border-[#E5E5E5] py-4'>
                        <div className='text-sm'>اشتراک گذاری</div>
                        <Image
                            src='/images/instagram.svg'
                            alt='share'
                            width={20}
                            height={20}
                        />
                        <Image
                            src='/images/instagram.svg'
                            alt='share'
                            width={20}
                            height={20}
                        />
                        <Image
                            src='/images/instagram.svg'
                            alt='share'
                            width={20}
                            height={20}
                        />
                    </div>
                </div>

                <div className='w-[261px]'>
                    <MostVisited />
                    <div className='mt-6'>
                        <ContactUs />
                    </div>
                    <div className='mt-6'>
                        {/* <MostVisited /> */}
                    </div>
                </div>
            </div>
        </div>
    )
}

export default SingleBlogPage