import { imgProps } from "@/misc/stools";
import { IPost } from "@/misc/types";
import Post from "@/wrappers/Post";
import { Metadata, ResolvingMetadata } from "next";
import React from "react";

const HOST = process.env.NEXT_PUBLIC_HOST;

type Props = {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
};

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const slug = params.slug;

  const data: IPost[] = await fetch(`${HOST}/api/pub/news/${slug}`).then(
    (res) => res.json()
  );

  const content = data[0];

  return {
    title: content.title,
    description: content.text?.slice(0, 50) + "...",
    openGraph: {
      url: `${HOST}/news/${slug}`,
      title: content.title,
      description: content.text?.slice(0, 50) + "...",
      images:
        content.photos && content.dir
          ? [{ url: `${HOST}/dist/${content.dir}/${content.photos[0]}`, ...imgProps(content.title) }]
          : [{ url: `${HOST}/main.jpg`, ...imgProps(content.title) }],
    },
  };
}

async function getData(slug: string) {
  const res = await fetch(`${HOST}/api/pub/news/${slug}`);

  if (!res.ok) {
    throw new Error("Failed to fetch data");
  }

  return res.json();
}

export default async function Page({ params, searchParams }: Props) {
  const { slug } = params;
  const data = await getData(slug);

  return <Post data={data[0]} />;
}