<script lang="ts">
  import type { ColorGradientInfo } from "../../types/colors";

  interface OverlayProps {
    id: string;
    overlay: ColorGradientInfo | null | undefined;
  }

  const { id, overlay }: OverlayProps = $props();
</script>

{#if overlay?.type === "hex"}
  <linearGradient {id} x1="0" y1="0" x2="100%" y2="100%">
    <stop offset="0%" stop-color={overlay.value} />
    <stop offset="100%" stop-color={overlay.value} />
  </linearGradient>
{/if}

{#if overlay?.type === "linear"}
  <linearGradient
    {id}
    gradientTransform={`rotate(${overlay.degrees - 90}, 0.5, 0.5)`}
  >
    {#each overlay.points as point}
      <stop offset={`${point.percent}%`} stop-color={point.color} />
    {/each}
  </linearGradient>
{/if}

{#if overlay?.type === "radial"}
  <radialGradient {id}>
    {#each overlay.points as point}
      <stop offset={`${point.percent}%`} stop-color={point.color} />
    {/each}
  </radialGradient>
{/if}
