// Copyright 2017-2026 @pezkuwi/react-components authors & contributors
// SPDX-License-Identifier: Apache-2.0

import React from 'react';
import { styled, keyframes } from 'styled-components';

interface Props {
  size?: number;
  className?: string;
}

const rotateHalo = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
`;

const pulseRays = keyframes`
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
`;

const rayShine = keyframes`
  0%, 100% { opacity: 0.9; }
  50% { opacity: 0.5; }
`;

const pulseGlow = keyframes`
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.3; }
`;

const StyledContainer = styled.div<{ size: number }>`
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: ${({ size }) => size}px;
  height: ${({ size }) => size}px;

  .sun-halos {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .halo {
    position: absolute;
    border-radius: 50%;
    animation: ${rotateHalo} 3s linear infinite;
  }

  .halo-green {
    width: 100%;
    height: 100%;
    border: 4px solid transparent;
    border-top-color: #00a550;
    border-bottom-color: #00a550;
    animation-duration: 3s;
  }

  .halo-red {
    width: 80%;
    height: 80%;
    border: 4px solid transparent;
    border-left-color: #ed1c24;
    border-right-color: #ed1c24;
    animation-duration: 2.5s;
    animation-direction: reverse;
  }

  .halo-yellow {
    width: 60%;
    height: 60%;
    border: 4px solid transparent;
    border-top-color: #ffed00;
    border-bottom-color: #ffed00;
    animation-duration: 2s;
  }

  .kurdistan-sun-svg {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
  }

  .sun-rays {
    animation: ${pulseRays} 2s ease-in-out infinite;
  }

  .ray {
    animation: ${rayShine} 2s ease-in-out infinite;
  }

  .sun-center {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
  }

  .sun-glow {
    animation: ${pulseGlow} 2s ease-in-out infinite;
  }
`;

function KurdistanSun ({ className = '', size = 200 }: Props): React.ReactElement<Props> {
  return (
    <StyledContainer className={className} size={size}>
      <div className="sun-halos">
        <div className="halo halo-green" />
        <div className="halo halo-red" />
        <div className="halo halo-yellow" />
      </div>

      <svg
        className="kurdistan-sun-svg"
        viewBox="0 0 200 200"
      >
        <g className="sun-rays">
          {Array.from({ length: 21 }).map((_, i) => {
            const angle = (i * 360) / 21;
            return (
              <line
                key={i}
                className="ray"
                style={{ animationDelay: `${i * 0.05}s` }}
                stroke="rgba(255, 255, 255, 0.9)"
                strokeLinecap="round"
                strokeWidth="3"
                transform={`rotate(${angle} 100 100)`}
                x1="100"
                x2="100"
                y1="100"
                y2="20"
              />
            );
          })}
        </g>

        <circle
          className="sun-center"
          cx="100"
          cy="100"
          fill="white"
          r="35"
        />

        <circle
          className="sun-glow"
          cx="100"
          cy="100"
          fill="url(#sunGradient)"
          r="35"
        />

        <defs>
          <radialGradient id="sunGradient">
            <stop offset="0%" stopColor="rgba(255, 255, 255, 0.8)" />
            <stop offset="100%" stopColor="rgba(255, 255, 255, 0.2)" />
          </radialGradient>
        </defs>
      </svg>
    </StyledContainer>
  );
}

export default React.memo(KurdistanSun);
