---
import { blog, utils } from "@/config";

interface Props {
  percent: number;
}

const { percent } = Astro.props;
const prongs = Math.round(utils.getRandom(blog.background.sun.prongs));
---

<style>
  svg {
    position: absolute;
    border-radius: 100%;
    top: 150px;
    left: calc(100lvw * var(--sun-progress-percent) - 75px);
    z-index: -1;

    animation:
      1ms alternate scroll,
      normal 120s infinite linear spin !important;
    animation-timeline: scroll(), auto !important;
  }
</style>

<svg
  id="sun"
  width="300"
  height="300"
  viewBox="0 0 100 100"
  style={`--parallax-speed: ${blog.background.parallax.sun};
          --sun-progress-percent: ${percent}`}
  data-parallax
>
  <circle fill={blog.palette.environment.sun} cx="50" cy="50" r="35"></circle>

  {
    new Array(prongs)
      .fill(0)
      .map((_, i) => (
        <polygon
          fill={blog.palette.environment.sun}
          points="50 0, 55 10, 45 10"
          transform={`rotate(${(i / prongs) * 360})`}
          transform-origin="center"
        />
      ))
  }
</svg>