'use client'
import { useSelector } from 'react-redux';
import Image from 'next/image';
import Link from 'next/link';
import { RiHeart2Line, RiMessage2Line } from 'react-icons/ri';
import ImageWithFallback from '@/Component/Common/ImageWithFallback';
import { AppStore } from '@/lib/store';
import { DraftCommentSVG } from '@/Component/Common/SVGs/CommonSVG';
import { useEffect, useRef } from 'react';

const PostInfo = (props) => {
    const { postInfoData, setUploadPost, onRequestUploadPost, JobDetailData, registerUploadTriggerRef } = props;
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);

    return (
        <div className='grid md:grid-cols-4 grid-cols-3 gap-4 mt-2.5 items-start'>
            {(userDetails?.role == "influencer" && JobDetailData?.status == "running" && JobDetailData?.campaignInfluencers?.[0]?.status !== 'closed') &&
                <div className='flex flex-col gap-1.5 cursor-pointer'>
                    <div className='w-full aspect-square bg-lightGray/50 border border-dashed border-gray flex items-center justify-center' onClick={() => (onRequestUploadPost ? onRequestUploadPost() : setUploadPost(true))}>
                        <Image src={'/assets/images/plus-black.svg'} alt="Profile 1" className='w-7 h-7' width={28} height={28} />
                    </div>
                </div>
            }
            {postInfoData?.posts?.length > 0 ? postInfoData?.posts?.map((item, index) => (
                <Link href={item?.post_link} target='_blank' key={index} className='flex flex-col gap-1.5'>
                    <div className='w-full h-max aspect-square bg-gray mb-1'>
                        <ImageWithFallback src={item?.image_link} alt="Profile 1" className='w-full h-full object-cover' width={125} height={125} />
                    </div>
                    <div className='flex items-center gap-1.5'>
                        <div className='flex items-center gap-1.5'>
                            <DraftCommentSVG />
                            <span className='text-darkGray text-xs'>{item?.comment_count}</span>
                        </div>
                        <div className='flex items-center gap-1.5'>
                            <RiHeart2Line className=' text-darkGray' />
                            <span className='text-darkGray text-xs'>{item?.like_counts}</span>
                        </div>
                    </div>
                </Link>
            )) : ''}
        </div>
    )
}

export default PostInfo