'use client';

import type { CSSProperties } from 'react';

export interface MosaicLogoProps {
  size?: number;
  spinning?: boolean;
  spinDuration?: number;
  className?: string;
}

export function MosaicLogo({
  size = 36,
  spinning = false,
  spinDuration = 20,
  className = '',
}: MosaicLogoProps): React.JSX.Element {
  const scale = size / 36;
  const squareSize = Math.round(14 * scale);
  const circleSize = Math.round(11 * scale);
  const borderRadius = Math.round(3 * scale);

  const animationValue = spinning
    ? `mosaicLogoSpin ${String(spinDuration)}s linear infinite`
    : undefined;

  const containerStyle: CSSProperties = {
    width: size,
    height: size,
    position: 'relative',
    flexShrink: 0,
    animation: animationValue,
    transformOrigin: 'center',
  };

  const baseSquareStyle: CSSProperties = {
    position: 'absolute',
    width: squareSize,
    height: squareSize,
    borderRadius,
  };

  const circleStyle: CSSProperties = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: circleSize,
    height: circleSize,
    borderRadius: '50%',
    background: 'var(--ms-pink-500)',
  };

  return (
    <>
      {spinning ? (
        <style>{`
          @keyframes mosaicLogoSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
          }
        `}</style>
      ) : null}
      <div style={containerStyle} className={className} role="img" aria-label="Mosaic logo">
        <div style={{ ...baseSquareStyle, top: 0, left: 0, background: 'var(--ms-blue-500)' }} />
        <div style={{ ...baseSquareStyle, top: 0, right: 0, background: 'var(--ms-purple-500)' }} />
        <div
          style={{
            ...baseSquareStyle,
            bottom: 0,
            right: 0,
            background: 'var(--ms-teal-500)',
          }}
        />
        <div
          style={{
            ...baseSquareStyle,
            bottom: 0,
            left: 0,
            background: 'var(--ms-amber-500)',
          }}
        />
        <div style={circleStyle} />
      </div>
    </>
  );
}

export default MosaicLogo;