/**
 * Goon brand marks.
 *
 * Rework 2026-05-30: poprzednia wersja rysowała litery ręcznie jako SVG path
 * geometry — wychodziło krzywo (o-ka jako nachodzące elipsy, zniekształcone n).
 * Teraz mamy General Sans Semibold jako realny font (useFonts w App.tsx), więc
 * wordmark renderuje PRAWDZIWY tekst w tej rodzinie — czysto i spójnie z resztą
 * typografii.
 *
 * Distinctive twist: dwutonowe "g[oo]n" — środkowe "oo" w oxblood (brand accent),
 * "g"+"n" w foreground. Czytelne nawet w małym headerze, wiąże logo z paletą.
 *
 *   <GoonWordmark size={26} />            // header
 *   <GoonWordmark size={48} mono />       // splash, jednolity kolor
 */
import React from 'react';
import { Text, View } from 'react-native';
import Svg, { Circle } from 'react-native-svg';

import { fonts, theme } from '../theme';

interface WordmarkProps {
  /** fontSize wordmarku w px. */
  size?: number;
  /** Kolor liter g+n (oo zawsze accent, chyba że `mono`). */
  color?: string;
  /** Jednolity kolor (bez dwutonu) — np. na splash gdzie tło = accent. */
  mono?: boolean;
}

export function GoonWordmark({ size = 26, color = theme.fg, mono = false }: WordmarkProps) {
  const base = {
    fontFamily: fonts.display,
    fontSize: size,
    letterSpacing: -size * 0.03,
    includeFontPadding: false as const,
  };
  const accent = mono ? color : theme.accent;
  return (
    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <Text style={[base, { color }]}>g</Text>
      <Text style={[base, { color: accent }]}>oo</Text>
      <Text style={[base, { color }]}>n</Text>
    </View>
  );
}

/**
 * Brand mark — double-o ("oo"): dwa ringi obok siebie z oxblood dotem w środku
 * każdego. Czyta się jako "oo" z goon / para soczewek-oczu (watching). Spójny z
 * wybranym app-icon (2026-05-30, AI-gen interlocked oo). Czysty SVG (bez fontu)
 * — używany na Login + jako wzór dla raster app-icon.
 *
 * `size` = szerokość; wysokość = size * 0.56 (proporcja 2 ringów obok siebie).
 *
 *   <GoonMark size={88} />
 */
export function GoonMark({
  size = 88,
  ringColor = theme.fg,
  dotColor = theme.accent,
}: {
  size?: number;
  ringColor?: string;
  dotColor?: string;
}) {
  // viewBox 200×112. Dwa ringi: cx 56 i 144, cy 56, r 44, stroke 13. Doty r 16.
  const height = size * (112 / 200);
  return (
    <Svg width={size} height={height} viewBox="0 0 200 112" fill="none">
      <Circle cx={56} cy={56} r={44} stroke={ringColor} strokeWidth={13} fill="none" />
      <Circle cx={56} cy={56} r={16} fill={dotColor} />
      <Circle cx={144} cy={56} r={44} stroke={ringColor} strokeWidth={13} fill="none" />
      <Circle cx={144} cy={56} r={16} fill={dotColor} />
    </Svg>
  );
}