'use client'
import { useEffect } from 'react';
import CampaignOverviewInfluencer from '@/Component/Influencer/InfluencerJobs/JobDetails/CampaignOverviewInfluencer';
import CampaignBrandDetail from '@/Component/Influencer/InfluencerJobs/JobDetails/CampaignBrandDetail';

interface Props {
    campaign: any;
    brandDetail: any;
    translations: any;
    onClose: () => void;
}

const CreatorPreviewDetailPanel = ({ campaign, brandDetail, translations, onClose }: Props) => {
    useEffect(() => {
        const handleKey = (e: KeyboardEvent) => {
            if (e.key === 'Escape') onClose();
        };
        document.addEventListener('keydown', handleKey);
        return () => document.removeEventListener('keydown', handleKey);
    }, [onClose]);

    return (
        <>
            <div className="z-[80] fixed top-0 right-0 2xl:w-2/3 xl:w-4/5 w-full h-full bg-white shadow-lg transform transition-transform translate-x-0">
                <div className="h-screen lg:px-6 lg:pb-8 pb-4 px-4 w-full overflow-y-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-lightGray [&::-webkit-scrollbar-thumb]:bg-gray/75 pt-14 relative">
                    <button
                        type="button"
                        aria-label="Close"
                        onClick={onClose}
                        className="absolute top-4 right-4 z-10 rounded-full h-10 w-10 flex items-center justify-center bg-white border border-lightGray hover:bg-lightGray/50 shadow-soft"
                    >
                        <span className="text-2xl leading-none -mt-0.5">×</span>
                    </button>
                    <div className="mb-4 inline-flex items-center gap-2 rounded-full bg-primary/10 text-primary px-3 py-1 text-xs font-semibold">
                        <span aria-hidden>👓</span>
                        {translations?.creatorPreviewBadge}
                    </div>
                    <div className="grid grid-cols-12 gap-4">
                        <div className="col-span-12 2xl:col-span-6 lg:col-span-7">
                            <CampaignOverviewInfluencer data={campaign} translations={translations} />
                        </div>
                        <div className="col-span-12 2xl:col-span-6 lg:col-span-5">
                            <CampaignBrandDetail campaignBrandDetailData={brandDetail} />
                        </div>
                    </div>
                </div>
            </div>
            <div onClick={onClose} className="z-[79] fixed top-0 left-0 w-full h-full bg-black/50"></div>
        </>
    );
};

export default CreatorPreviewDetailPanel;