mediahub-fe/app/[locale]/(public)/video/detail/[slug]/page.tsx

import React, { useEffect, useState } from "react";
import {
  checkWishlistStatus,
  createPublicSuggestion,
  deletePublicSuggestion,
  deleteWishlist,
  getDetail,
  getDetailMetaData,
  getPublicSuggestionList,
  saveWishlist,
} from "@/service/landing/landing";
import { Metadata } from "next";
import DetailImage from "@/components/main/image-detail";
import DetailVideo from "@/components/main/video-detail";

interface Size {
  label: string;
  value: string;
}

type Props = {
  params: {
    title: string;
    slug: string;
    description: string;
    thumbnailLink: string;
  };
};

export async function generateMetadata({ params }: any): Promise<Metadata> {
  const slug = String(params?.slug);
  const res = await getDetailMetaData(String(slug));
  const video = res?.data?.data;
  // console.log("video", video);
  return {
    title: video.title,
    description: video.description,
    // openGraph: {
    //   title: video?.title,
    //   description: video?.description,
    //   videos: [`${video?.smallThumbnailLink}`],
    // },
    openGraph: {
      title: video?.title,
      description: video?.description,
      url: `https://mediahub.polri.go.id/in/video/detail/${slug}`,
      type: "video.other",
      images: [
        {
          url: video?.thumbnailLink,
          width: 1280,
          height: 720,
          alt: video?.title || "Thumbnail Mediahub Polri",
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: video?.title,
      description: video?.description,
      images: [
        video?.thumbnailLink,
      ],
    },
  };
}

export default async function DetailInfo({ params }: Props) {
  return <DetailVideo />;
}