---
import { makeOgImageUrl, type OgImageAllTemplatesWithProps } from '../components/OgImage'
import { KYCNOTME_SCHEMA_MINI } from '../lib/schema'

import BaseLayout from './BaseLayout.astro'

import type { AstroChildren } from '../lib/astro'
import type { MarkdownLayoutProps } from 'astro'
import type { ComponentProps } from 'astro/types'
import type { Article, WithContext } from 'schema-dts'

type Props = ComponentProps<typeof BaseLayout> &
  MarkdownLayoutProps<{
    children: AstroChildren
    title: string
    author: string
    pubDate: string
    description: string
    icon?: string
  }>

const { frontmatter, schemas, ...baseLayoutProps } = Astro.props
const publishDate = frontmatter.pubDate ? new Date(frontmatter.pubDate) : null
const ogImageTemplateData = {
  template: 'generic',
  title: frontmatter.title,
  description: frontmatter.description,
  icon: frontmatter.icon,
} satisfies OgImageAllTemplatesWithProps
const weAreAuthor = frontmatter.author.toLowerCase().trim() === 'kycnot.me'
---

<BaseLayout
  {...baseLayoutProps}
  pageTitle={frontmatter.title}
  description={frontmatter.description}
  ogImage={ogImageTemplateData}
  schemas={[
    {
      '@context': 'https://schema.org',
      '@type': 'Article',
      headline: frontmatter.title,
      description: frontmatter.description,
      datePublished: publishDate?.toISOString(),
      dateModified: publishDate?.toISOString(),
      image: makeOgImageUrl(ogImageTemplateData, Astro.url),
      author: frontmatter.author
        ? weAreAuthor
          ? KYCNOTME_SCHEMA_MINI
          : {
              '@type': 'Person',
              name: frontmatter.author,
            }
        : undefined,
      publisher: KYCNOTME_SCHEMA_MINI,
      mainEntityOfPage: {
        '@type': 'WebPage',
        url: Astro.url.href,
      },
    } satisfies WithContext<Article>,
    ...(schemas ?? []),
  ]}
>
  <div
    class="prose prose-invert prose-headings:text-green-400 prose-h1:text-[2.5rem] prose-h1:font-bold prose-h1:my-8 prose-h1:drop-shadow-[0_0_10px_rgba(0,255,0,0.3)] prose-h2:text-green-500 prose-h2:text-[1.8rem] prose-h2:font-semibold prose-h2:my-6 prose-h2:border-b prose-h2:border-green-900 prose-h2:pb-1 prose-h3:text-green-600 prose-h3:text-[1.4rem] prose-h3:font-semibold prose-h3:my-4 prose-h4:text-green-700 prose-h4:text-[1.2rem] prose-h4:font-semibold prose-h4:my-3 prose-strong:font-semibold prose-strong:drop-shadow-[0_0_5px_rgba(0,255,0,0.2)] prose-p:text-gray-300 prose-p:my-4 prose-p:leading-relaxed prose-a:text-green-400 prose-a:no-underline prose-a:transition-all prose-a:border-b prose-a:border-green-900 prose-a:hover:text-green-400 prose-a:hover:drop-shadow-[0_0_8px_rgba(0,255,0,0.4)] prose-a:hover:border-green-400 prose-ul:text-gray-300 prose-ol:text-gray-300 prose-li:my-2 prose-li:leading-relaxed mx-auto"
  >
    <h1>{frontmatter.title}</h1>
    <p class="text-gray-500">
      {frontmatter.author && `by ${frontmatter.author}`}
      {frontmatter.pubDate && ` | ${new Date(frontmatter.pubDate).toLocaleDateString()}`}
    </p>

    <slot />
  </div>
</BaseLayout>