import InfluencerJobs from '@/Component/Influencer/InfluencerJobs';
import { WebsiteURL } from '@/Utils/APIRequest/Endpoints';
import {
    buildCampaignShareMetadata,
    fetchPublicCampaignBySlug,
} from '@/Utils/Other/fetchPublicCampaignMetadata';
import { getInfluencerJobUrl } from '@/Utils/Other/campaignShare';
import type { Metadata } from 'next';

type Props = {
    params: Promise<{ slug: string }>;
};

export const dynamic = 'force-dynamic';

export async function generateMetadata({ params }: Props): Promise<Metadata> {
    const { slug } = await params;
    const jobSlug = Array.isArray(slug) ? slug[0] : slug;
    const fetchResult = await fetchPublicCampaignBySlug(jobSlug);
    const { title, description, image } = buildCampaignShareMetadata(fetchResult, jobSlug);
    const pageUrl = getInfluencerJobUrl(jobSlug);
    const ogDescription = description || '';

    return {
        title,
        description: ogDescription,
        metadataBase: WebsiteURL,
        openGraph: {
            type: 'website',
            title,
            description: ogDescription,
            url: pageUrl,
            siteName: 'Connector Club',
            ...(image
                ? { images: [{ url: image, width: 1200, height: 630, alt: title }] }
                : {}),
        },
        twitter: {
            card: image ? 'summary_large_image' : 'summary',
            title,
            description: ogDescription,
            ...(image ? { images: [image] } : {}),
        },
    };
}

const JobSlugPage = async ({ params }: Props) => {
    const { slug } = await params;
    const jobSlug = Array.isArray(slug) ? slug[0] : slug;

    return <InfluencerJobs campaignSlug={jobSlug} />;
};

export default JobSlugPage;