---
import { Icon } from 'astro-icon/components'

import { cn } from '../lib/cn'

import BaseLayout from './BaseLayout.astro'

import type { ComponentProps } from 'astro/types'

type Props = Omit<ComponentProps<typeof BaseLayout>, 'widthClassName'> & {
  layoutHeader: { icon: string; title: string; subtitle: string }
}

const { layoutHeader, ...baseLayoutProps } = Astro.props
---

<BaseLayout
  className={{
    ...baseLayoutProps.className,
    main: cn('xs:items-center-safe flex grow flex-col justify-center-safe', baseLayoutProps.className?.main),
  }}
  {...baseLayoutProps}
>
  <div
    class="bg-night-800 border-night-500 xs:block xs:max-w-screen-xs contents w-full rounded-xl border p-8"
  >
    <div class="bg-day-200 mx-auto flex size-12 items-center justify-center rounded-lg">
      <Icon name={layoutHeader.icon} class="text-night-800 size-8" />
    </div>

    <h1 class="font-title text-day-200 mt-1 text-center text-3xl font-semibold">
      {layoutHeader.title}
    </h1>
    <p class="text-day-500 xs:mb-8 mt-1 mb-6 text-center">{layoutHeader.subtitle}</p>

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