import { cn } from '@/lib/cn';
import { MarkArt, MARK_TOKENS } from './mark';

/**
 * The AI Atlas mark (atlas plate + "A" constellation + timeline "now" node). `plate` (default) follows the theme through the
 * `--brand-*` tokens; `mono` draws the graph alone in `currentColor` for footers and monochrome contexts.
 */
export function LogoMark({ size = 24, className, variant = 'plate', title }: { size?: number; className?: string; variant?: 'plate' | 'mono'; title?: string }) {
  const colors = variant === 'plate' ? MARK_TOKENS : { plate: 'transparent', ink: 'currentColor', grid: 'currentColor', accent: 'var(--accent)' };
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" className={cn('shrink-0', className)} aria-hidden={title ? undefined : true} role={title ? 'img' : undefined}>
      {title && <title>{title}</title>}
      {variant === 'mono' ? (
        <g opacity={1}>
          <rect x="1" y="1" width="30" height="30" rx="7" stroke="currentColor" strokeWidth="1.2" opacity="0.5" />
          <MarkArt colors={colors} plate={false} simplified={size <= 20} />
        </g>
      ) : (
        <MarkArt colors={colors} simplified={size <= 20} />
      )}
    </svg>
  );
}

/** Lockup: mark + "AI Atlas" (Geist, "AI" heavy, "Atlas" medium). */
export function Wordmark({ className, markSize = 22, textClassName }: { className?: string; markSize?: number; textClassName?: string }) {
  return (
    <span className={cn('inline-flex items-center gap-2 text-ink', className)}>
      <LogoMark size={markSize} />
      <span className={cn('text-[17px] tracking-tight', textClassName)}>
        <span className="font-bold">AI</span> <span className="font-medium text-ink-2">Atlas</span>
      </span>
    </span>
  );
}