interface Props {
  bearing?: number;
  style?: React.CSSProperties;
}

export default function NorthCompass({ bearing = 0, style }: Props) {
  return (
    <div
      style={{
        position: 'absolute',
        top: 190,
        right: 14,
        zIndex: 1000,
        ...style,
      }}
    >
      <svg
        width={36}
        height={36}
        viewBox="0 0 36 36"
        style={{ transform: `rotate(${bearing}deg)`, filter: 'drop-shadow(0 1px 3px rgba(0,0,0,0.5))' }}
      >
        {/* Background circle */}
        <circle cx={18} cy={18} r={17} fill="rgba(0,0,0,0.7)" stroke="rgba(255,255,255,0.3)" strokeWidth={1} />
        {/* North arrow (red) */}
        <polygon points="18,4 14,18 18,15 22,18" fill="#e74c3c" />
        {/* South arrow (white) */}
        <polygon points="18,32 14,18 18,21 22,18" fill="rgba(255,255,255,0.7)" />
        {/* N label */}
        <text x={18} y={9} textAnchor="middle" fill="#fff" fontSize={7} fontWeight={700} fontFamily="Arial, sans-serif">N</text>
      </svg>
    </div>
  );
}
