import { metadata } from '@/app/metadata'
import { ImageWrapper } from '@/components/content/ImageWrapper'
import { TableOfContents } from '@/components/post/TableOfContents'
import { getPostBySlug } from '@/lib/posts'
import { slugify } from '@/utils/slug'
import { Pencil, SendHorizonal } from 'lucide-react'
import type { Metadata } from 'next'
import Link from 'next/link'

export async function generateStaticParams() {
  return await getPostBySlug('about', 'content/pages')
}

export const dynamicParams = false

export async function generateMetadata(): Promise<Metadata> {
  const { meta } = await getPostBySlug('about', 'content/pages')
  return {
    title: `${meta.title} | ${metadata.title!.toString()}`,
    description: meta.description,
    openGraph: {
      type: 'website',
      title: `${meta.title} | ${metadata.title!.toString()}`,
      description: meta.description,
      url: process.env.SITE_URL + `/about`,
      siteName: metadata.title!.toString(),
    },
  }
}

export default async function Post() {
  const { meta, content } = await getPostBySlug('about', 'content/pages')

  return (
    <main className="flex w-full">
      <article className="max-w-3xl 2xl:max-w-4xl mx-auto px-4 py-8 mb-8 lg:py-16 min-w-0">
        <h1 className="text-4xl font-bold mb-4">{meta.title}</h1>
        <p className="text-fg text-lg mb-4">{meta.description}</p>
        <div className="prose">{content}</div>
      </article>

      <div className="w-80 2xl:w-100 hidden lg:block" />
    </main>
  )
}