import { Title, Text, Group, Stack } from '@pikku/mantine/core'
import { type ReactNode } from 'react'
import type { I18nNode } from '@pikku/react'

export function PageHeader({
  title,
  description,
  action,
}: {
  title: I18nNode
  description?: I18nNode
  action?: ReactNode
}) {
  return (
    <Group justify="space-between" align="flex-start">
      <Stack gap={4}>
        <Title order={2}>{title}</Title>
        {description && (
          <Text size="sm" c="dimmed">
            {description}
          </Text>
        )}
      </Stack>
      {action}
    </Group>
  )
}