import type { FC } from 'react'
import { Box, Group, Text } from '@pikku/mantine/core'
import type { I18nString } from '@pikku/react'

// Placeholder brand mark + app name. A gradient tile (brand primary → secondary,
// both theme-driven so it recolours with the active theme) holding a bold spark
// glyph — a confident, generic starting point, NOT a flat monochrome square.
// Reshape the glyph into a real brand mark per project.
export const Wordmark: FC<{ name: I18nString; size?: number }> = ({ name, size = 30 }) => {
  return (
    <Group gap={10} align="center" wrap="nowrap">
      <Box
        w={size}
        h={size}
        style={{
          flexShrink: 0,
          borderRadius: 'var(--mantine-radius-md)',
          // Gradient falls back to the solid primary fill if the theme defines no
          // secondary, so it always renders on-brand.
          backgroundImage:
            'linear-gradient(135deg, var(--mantine-primary-color-filled), var(--mantine-color-secondary-5, var(--mantine-primary-color-filled)))',
          color: 'var(--mantine-primary-color-contrast)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          boxShadow: 'var(--mantine-shadow-sm)',
        }}
      >
        <svg width={size * 0.56} height={size * 0.56} viewBox="0 0 24 24" fill="currentColor">
          {/* Four-point spark — energetic, distinctive, reads at any size. */}
          <path d="M12 1.5c.9 5.1 4.5 8.7 9.6 9.6v1.8c-5.1.9-8.7 4.5-9.6 9.6h-1.8c-.9-5.1-4.5-8.7-9.6-9.6v-1.8c5.1-.9 8.7-4.5 9.6-9.6Z" />
        </svg>
      </Box>
      <Text fw={700} style={{ fontSize: size * 0.55, letterSpacing: '-0.02em' }}>
        {name}
      </Text>
    </Group>
  )
}