import { formatNumber } from "@/Utils/Other/FormateNumbers";
import Link from "next/link";
import { FacebookSVG, GoogleSVG, InstagramSVG, TiktokSVG } from "../SVGs/CommonSVG";
import { YoutubeSVG } from "../SVGs/AuthSVG";
import { formatNumberWithCommas } from "@/Utils/Other/FormatNumberWithCommas";
import { translateJobRequirements } from "@/Utils/Other/TranslateJobRequirement";
import SkeletonLoader from "@/Layout/SkeletonLoader";

const OverviewRight = (props) => {
    const { data, translations, isPending } = props;
    const availableIcons = {
        facebook: <FacebookSVG />,
        instagram: <InstagramSVG />,
        youtube: <YoutubeSVG />,
        tiktok: <TiktokSVG />
    };
    return (
        <div className="border border-lightGray rounded-2xl bg-white shadow">
            <div className="border-b border-lightGray px-3 pt-5 pb-4 flex flex-col gap-4">
                <div className="flex flex-col">
                    {isPending ?
                        <SkeletonLoader width={40} height={20} />
                        : <span className="font-semibold">{data?.total_budget > 0 ? `${formatNumberWithCommas(data?.total_budget)} ${data?.currency}` : "N/A"}</span>
                    }
                    <span className="text-xs">{translations?.totalBudget}</span>
                </div>
                {isPending ? <SkeletonLoader width={40} height={20} /> :
                    data?.budget_per_influencer > 0 &&
                    <div className="flex flex-col">
                        <span className="font-semibold">${formatNumberWithCommas(data?.budget_per_influencer)} {data?.currency}</span>
                        <span className="text-xs"><span role="img" aria-label="cash" className="mr-1">💰</span>{translations?.budgetPerInfluencer}</span>
                    </div>
                }
                {isPending ? <SkeletonLoader width={40} height={20} /> :
                    data?.product_value > 0 &&
                    <div className="flex flex-col">
                        <span className="font-semibold">${formatNumberWithCommas(data?.product_value)} {data?.currency}</span>
                        <span className="text-xs"><span role="img" aria-label="cash" className="mr-1">🎁</span>{translations?.productValue}</span>
                    </div>
                }
                <div className="flex flex-col">
                    <span className="font-semibold">{data?.number_of_influencers > 0 ? data?.number_of_influencers : "N/A"}</span>
                    <span className="text-xs">{translations?.numberOfInfluencer}</span>
                </div>
            </div>
            <div className="px-3 pt-3 pb-3 flex flex-col gap-4 ">
                <div className="flex items-center justify-between">
                    <span className="text-xs">{translations?.influencerType}</span>
                    <span className="font-semibold">{Array.isArray(data?.influencer_type) ? data?.influencer_type.join(', ') : data?.influencer_type}</span>
                </div>
                <div className="flex items-center justify-between">
                    <span className="text-xs">{translations?.nicheCategory}</span>
                    <span className="font-semibold text-right ">{translateJobRequirements(data?.job_requirement, translations)}</span>
                </div>
                <div className="flex items-center justify-between">
                    <span className="text-xs">{translations?.location}</span>
                    <span className="font-semibold">{data?.campaign_country}</span>
                </div>
                {/* <div className="flex items-center justify-between">
                    <span className="text-sm">Audience Demographics</span>
                    <span className="font-semibold">{data?.audience_demographic}</span>
                </div>
                <div className="flex items-center justify-between">
                    <span className="text-sm">Gender</span>
                    <span className="font-semibold">{data?.gender_type}</span>
                </div> */}
            </div>
            <div className="ps-3 pt-3 pb-3 flex flex-col gap-4 border-t border-lightGray">
                <div className="flex gap-5 justify-start">
                    {data?.platforms?.map(platform => availableIcons[platform])}
                </div>
            </div>
        </div>
    )
}

export default OverviewRight