import styles from "./loading.module.css"

type Size = "small" | "medium" | "large"
type Color = "white" | "burgundy"
type Props = {
  size?: Size
  color?: Color
  className?: string
}

export function Loading({
  size = "medium",
  color = "burgundy",
  className,
}: Props) {
  return (
    <svg
      width={sizes[size]}
      height={sizes[size]}
      viewBox="0 0 20 20"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className={`${styles.loading} ${className}`}
    >
      <circle cx="10" cy="1.73913" r="1.73913" fill={colors[color]} />
      <circle cx="16.087" cy="4.34783" r="1.73913" fill={colors[color]} />
      <circle cx="18.2609" cy="10" r="1.73913" fill={colors[color]} />
      <circle cx="16.087" cy="15.6522" r="1.73913" fill={colors[color]} />
      <circle cx="10" cy="18.2609" r="1.73913" fill={colors[color]} />
      <circle cx="3.91304" cy="15.6522" r="1.73913" fill={colors[color]} />
      <circle cx="1.73913" cy="10" r="1.73913" fill={colors[color]} />
      <circle cx="3.91304" cy="4.34783" r="1.73913" fill={colors[color]} />
    </svg>
  )
}

const colors: { [color in Color]: string } = {
  white: "#fff",
  burgundy: "var(--Scandic-Brand-Burgundy)",
}

const sizes: { [size in Size]: number } = {
  small: 16,
  medium: 20,
  large: 24,
}