import { Group, Stack, Text, Title } from '@pikku/mantine/core'
import { m } from '@/i18n/messages'
import { useLocale } from '@/i18n/config'

type Variant = 'plum' | 'white'

export function BrandMark({
  size = 48,
  variant = 'plum',
}: {
  size?: number
  variant?: Variant
}) {
  const src = variant === 'white' ? '/brand/logo-white.svg' : '/brand/logo-plum.svg'
  return <img src={src} alt="Seminarhof Drawehn" width={size} height={size} />
}

export function BrandHeader({ variant = 'plum' }: { variant?: Variant }) {
  useLocale()
  const color = variant === 'white' ? 'white' : 'var(--brand-plum)'
  return (
    <Group gap="md" align="center" wrap="nowrap">
      <BrandMark variant={variant} size={56} />
      <Stack gap={2}>
        <Title order={2} c={color} style={{ letterSpacing: '0.02em' }}>
          {m.common_brand_name()}
        </Title>
        <Text size="sm" c={variant === 'white' ? 'white' : 'dimmed'} fs="italic">
          {m.common_brand_tagline()}
        </Text>
      </Stack>
    </Group>
  )
}