import { cn } from '@/lib/cn';
import { MARK_TOKENS, MARK_VIEWBOX, MarkArt, markLevel, type MarkColors } from './mark';

/**
 * The mark as an inline SVG. `plate` follows the theme through the `--brand-*` tokens (dark plate on the light UI,
 * light plate on the dark UI); `mono` draws the globe in `currentColor` with the live node in `--live`, for use inside
 * text. Detail level follows the rendered size so small instances keep thick strokes.
 */
export function LogoMark({ size = 24, className, variant = 'plate', title }: { size?: number; className?: string; variant?: 'plate' | 'mono'; title?: string }) {
  const colors: MarkColors = variant === 'plate' ? MARK_TOKENS : { plate: 'transparent', ink: 'currentColor', grid: 'currentColor', accent: 'var(--live)' };
  return (
    <svg width={size} height={size} viewBox={`0 0 ${MARK_VIEWBOX} ${MARK_VIEWBOX}`} fill="none" className={cn('shrink-0', className)} aria-hidden={title ? undefined : true} role={title ? 'img' : undefined}>
      {title && <title>{title}</title>}
      <MarkArt colors={colors} plate={variant === 'plate'} level={markLevel(size)} />
    </svg>
  );
}

/** Wordmark only: "Company" regular, "Atlas" semibold, tight tracking — Geist through the UI font stack. */
export function WordmarkText({ className }: { className?: string }) {
  return (
    <span className={cn('whitespace-nowrap tracking-[-0.02em]', className)}>
      <span className="font-normal text-ink-2">Company</span> <span className="font-semibold text-ink">Atlas</span>
    </span>
  );
}

/** Lockup: mark + wordmark. */
export function Wordmark({ className, markSize = 24, textClassName }: { className?: string; markSize?: number; textClassName?: string }) {
  return (
    <span className={cn('inline-flex items-center gap-2.5 text-ink', className)}>
      <LogoMark size={markSize} />
      <WordmarkText className={cn('text-[17px]', textClassName)} />
    </span>
  );
}

/** Alias kept for readability at call sites that want the full lockup. */
export const Logo = Wordmark;