'use client';

/**
 * Animated brand glyph: a magenta→violet square tile holding an EKG/activity
 * polyline — a faint base trace plus a bright dash that sweeps across on a
 * loop, with a soft glow. Sits at the top of the Mission Control rail.
 */
import { useReducedMotion } from './useReducedMotion';

export function PulseGlyph({ size = 40 }: { size?: number }) {
    const reduced = useReducedMotion();
    return (
        <span
            style={{
                width: size,
                height: size,
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
                flex: 'none',
                background: 'linear-gradient(135deg, var(--magenta), var(--violet))',
                boxShadow: '0 0 18px color-mix(in srgb, var(--magenta) 45%, transparent)',
            }}
        >
            <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 48 48" fill="none">
                <polyline
                    points="2,24 12,24 18,10 26,38 32,24 46,24"
                    stroke="rgba(255,255,255,0.35)"
                    strokeWidth="2.5"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                />
                <polyline
                    points="2,24 12,24 18,10 26,38 32,24 46,24"
                    stroke="#ffffff"
                    strokeWidth="2.5"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeDasharray="20 120"
                    style={{ animation: reduced ? 'none' : 'nocSweep 2.4s linear infinite' }}
                />
            </svg>
        </span>
    );
}