// app/product/[product]/page.tsx
import ProductDetail from '@/features/product/ui/Product';
import { product_api } from '@/shared/config/api/product/api';
import { BASE_URL } from '@/shared/config/api/URLs';
import type { Metadata } from 'next';
import { Suspense } from 'react';

interface PageProps {
  params: {
    product: string;
  };
}

export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  try {
    const { product } = await params;

    const res = await product_api.detail(product);

    return {
      title: `${res.data.name} - Gastro Market`,
      description:
        res.data.short_name || `Gastro Market mahsuloti: ${res.data.name}`,
      openGraph: {
        title: `${res.data.name} - Gastro Market`,
        description:
          res.data.short_name || `Gastro Market mahsuloti: ${res.data.name}`,
        type: 'website',
        images: [
          res.data.images && res.data.images.length > 0
            ? {
                url: res.data.images[0].image?.includes(BASE_URL)
                  ? res.data.images[0].image
                  : BASE_URL + res.data.images[0].image,
              }
            : { url: '/placeholder.svg' },
        ],
      },
      twitter: {
        card: 'summary_large_image',
        title: `${res.data.name} - Gastro Market`,
        description:
          res.data.short_name || `Gastro Market mahsuloti: ${res.data.name}`,
        images: [
          res.data.images && res.data.images.length > 0
            ? {
                url: res.data.images[0].image?.includes(BASE_URL)
                  ? res.data.images[0].image
                  : BASE_URL + res.data.images[0].image,
              }
            : { url: '/placeholder.svg' },
        ],
      },
    };
  } catch {
    return {
      title: 'Mahsulot - Gastro Market',
      description: 'Gastro Market mahsulotlarini kashf eting',
    };
  }
}

const Page = () => {
  return (
    <Suspense>
      <ProductDetail />
    </Suspense>
  );
};

export default Page;