1  import { cn } from '../utils/cn.js'
 2  
 3  export interface AlphaLogoProps {
 4    size?: 'sm' | 'md' | 'lg' | 'xl' | number
 5    variant?: 'default' | 'dark' | 'monochrome'
 6    className?: string
 7    'aria-label'?: string
 8  }
 9  
10  const SIZES: Record<string, number> = {
11    sm: 24,
12    md: 32,
13    lg: 48,
14    xl: 64,
15  }
16  
17  const COLORS = {
18    default: { primary: '#2B87FF', bg: 'rgba(43,135,255,0.1)' },
19    dark: { primary: '#4A9DFF', bg: 'rgba(74,157,255,0.1)' },
20    monochrome: { primary: 'currentColor', bg: 'currentColor' },
21  }
22  
23  export function AlphaLogo({
24    size = 'md',
25    variant = 'default',
26    className,
27    'aria-label': ariaLabel = 'Alpha Logo',
28  }: AlphaLogoProps) {
29    const sizeValue = typeof size === 'number' ? size : SIZES[size]
30    const colors = COLORS[variant]
31    const bgOpacity = variant === 'monochrome' ? 0.1 : 1
32  
33    return (
34      <svg
35        width={sizeValue}
36        height={sizeValue}
37        viewBox="0 0 64 64"
38        fill="none"
39        xmlns="http://www.w3.org/2000/svg"
40        className={cn('aspect-logo aspect-logo-alpha', className)}
41        role="img"
42        aria-label={ariaLabel}
43      >
44        <circle
45          cx="32"
46          cy="32"
47          r="30"
48          fill={colors.bg}
49          opacity={bgOpacity}
50        />
51        <text
52          x="32"
53          y="44"
54          textAnchor="middle"
55          fill={colors.primary}
56          fontSize="36"
57          fontFamily="IBM Plex Sans, system-ui, sans-serif"
58          fontWeight="700"
59        >
60          α
61        </text>
62      </svg>
63    )
64  }