import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import { getContentDetail } from '@/libs/axios/modules/content';
import VerticalImageGallery from '@/components/ui/VerticalImageGallery';
import type { ContentItem } from '@/models/content';

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

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  try {
    const res = await getContentDetail('competition-infos', slug);
    const item: ContentItem = res.data.data;
    return { title: `${item.title} | ${item.title_en}` };
  } catch {
    return { title: 'Competition Info' };
  }
}

export default async function CompetitionInfoDetailPage({ params }: Props) {
  const { slug } = await params;

  let item: ContentItem;
  try {
    const res = await getContentDetail('competition-infos', slug);
    item = res.data.data;
  } catch (err: unknown) {
    if ((err as { status?: number })?.status === 404 || (err as { status?: number })?.status === 400) notFound();
    throw err;
  }

  return (
    <main
      style={item.background ? { background: item.background } : undefined}
    >
      <div className="py-6 mx-auto">
        <VerticalImageGallery images={item.images ?? []} />
      </div>

      {item.button_image && item.url && (
        <a
          href={item.url}
          target="_blank"
          rel="noopener noreferrer"
          aria-label={item.title}
          className="fixed bottom-20 left-0 right-0 mx-auto z-40 w-25 h-25 rounded-full shadow-lg overflow-hidden hover:scale-105 transition-transform"
        >
          <img
            src={item.button_image}
            alt={item.title}
            className="w-full h-full object-cover"
          />
        </a>
      )}
    </main>
  );
}