"use client"
import { useGetBlogByIdQuery } from '@/services/blog'
import moment from 'moment'
import Image from 'next/image'
import React, { useState } from 'react'

export const ComponentsBlogDetails = ({ id }: { id: string }) => {
    moment.locale('ar');
    const { data, isFetching } = useGetBlogByIdQuery({ id })
    const [isShowImage, setIsShowImage] = useState(true)
    if (isFetching)
        return <div className='flex justify-center items-center h-[50vh]'>
            <div className="loader !bg-primary"></div>
        </div>

    return (

        <div className="flex-col w-[50%] gap-4 flex">
            <div className="text-black text-opacity-90 text-[40px] font-semibold font-['Alexandria'] leading-[56px]">
                {
                    data?.info?.title
                }
            </div>
            <div className='flex gap-4 '>
                <div className=" text-primary text-sm font-semibold font-['Alexandria'] leading-[21px]">{data?.info.UserId}</div>
                <div className=" text-black text-opacity-60 text-sm font-normal font-['Alexandria'] leading-[21px]">{moment("2023-08-20").format('MMMM DD, YYYY')}</div>
            </div>

            <div className="h-[462px] w-full bg-stone-300 rounded-[20px]" >
                {isShowImage && <Image onError={() => {
                    setIsShowImage(false);
                }} className='w-full h-full rounded-[20px]' src={""} alt='"blog image' width={100} height={100} />
                }
            </div>
            <p className=" text-justify text-black text-opacity-60 text-xl font-normal font-['Alexandria'] leading-[34.40px]">
                {data?.info?.content}
            </p>

        </div>

    )
}