import React from 'react'
import { Box, Group, Stack, Text, Title } from '@mantine/core'

export interface PageHeaderProps {
  /** Page title. Pass an i18n string from the app (m.foo()). */
  title: React.ReactNode
  /** Optional one-line description under the title. */
  description?: React.ReactNode
  /** Right-aligned actions (buttons, menus). */
  actions?: React.ReactNode
}

// The single shared page header every screen uses: a title, optional
// description, and a right-aligned action slot. Keeps headers consistent across
// pages — compose it, don't hand-roll a per-page header.
export function PageHeader({ title, description, actions }: PageHeaderProps) {
  return (
    <Group justify="space-between" align="flex-end" wrap="nowrap" mb="xl">
      <Stack gap={4} style={{ minWidth: 0 }}>
        <Title order={1} fz={26} fw={680} style={{ letterSpacing: '-0.03em', lineHeight: 1.1 }}>
          {title}
        </Title>
        {description ? (
          <Text c="dimmed" size="sm" style={{ lineHeight: 1.5 }}>
            {description}
          </Text>
        ) : null}
      </Stack>
      {actions ? <Box style={{ flexShrink: 0 }}>{actions}</Box> : null}
    </Group>
  )
}