import type { ReactNode } from 'react'
import { Layout, LayoutContent } from '@astryxdesign/core/Layout'
import { Heading } from '@astryxdesign/core/Heading'
import { Text } from '@astryxdesign/core/Text'
import { VStack } from '@astryxdesign/core/VStack'

export function Page({ children }: { children: ReactNode }) {
  return (
    <Layout
      height="auto"
      padding={6}
      contentWidth={1120}
      content={<LayoutContent>{children}</LayoutContent>}
    />
  )
}

interface PageHeaderProps {
  eyebrow?: string
  title: string
  description?: string
}

export function PageHeader({ eyebrow, title, description }: PageHeaderProps) {
  return (
    <VStack gap={2} maxWidth={820}>
      {eyebrow ? (
        <Text type="label" color="accent">
          {eyebrow}
        </Text>
      ) : null}
      <Heading level={1} type="display-3" textWrap="balance">
        {title}
      </Heading>
      {description ? (
        <Text type="large" color="secondary" as="p" textWrap="pretty">
          {description}
        </Text>
      ) : null}
    </VStack>
  )
}