import type { Metadata } from 'next'
import { notFound } from 'next/navigation'
import SeoCategoryPage from '@/components/SeoCategoryPage'
import { getSpanishSeoPageBySlug, spanishSeoPageSlugs } from '@/lib/spanishSeoPages'
import { siteConfig } from '@/lib/site'

type SpanishSeoRouteProps = {
  params: Promise<{ slug: string }>
}

export function generateStaticParams() {
  return spanishSeoPageSlugs
    .filter((slug) => slug !== 'comparar-google-lens')
    .map((slug) => ({ slug }))
}

export async function generateMetadata({ params }: SpanishSeoRouteProps): Promise<Metadata> {
  const { slug } = await params
  if (slug === 'comparar-google-lens') {
    notFound()
  }
  const profile = getSpanishSeoPageBySlug(slug)

  if (!profile) {
    return {}
  }

  return {
    title: profile.metaTitle,
    description: profile.metaDescription,
    alternates: {
      canonical: profile.canonical,
      languages: {
        es: profile.canonical,
        'x-default': '/',
      },
    },
    openGraph: {
      title: profile.metaTitle,
      description: profile.metaDescription,
      url: `${siteConfig.domain}${profile.canonical}`,
      type: 'website',
      locale: 'es_ES',
      images: [{ url: '/og-image.png', width: 1200, height: 630, alt: profile.metaTitle }],
    },
    twitter: {
      card: 'summary_large_image',
      title: profile.metaTitle,
      description: profile.metaDescription,
      images: ['/og-image.png'],
    },
  }
}

export default async function SpanishSeoRoute({ params }: SpanishSeoRouteProps) {
  const { slug } = await params
  const profile = getSpanishSeoPageBySlug(slug)

  if (!profile) {
    notFound()
  }

  return <SeoCategoryPage profile={profile} />
}