import { getZodiacSignByDate } from "@/services/zodiac-sign";
import { images } from "../../data";
import ZodiacWheelSVG from "../../ui/ZodiacWheelSVG";
import styles from "./styles.module.scss";

interface IZodiacWheelProps {
  date: string;
}

const zodiacs = [
  "Gemini",
  "Cancer",
  "Leo",
  "Virgo",
  "Libra",
  "Scorpio",
  "Sagittarius",
  "Capricorn",
  "Aquarius",
  "Pisces",
  "Aries",
  "Taurus",
];

function ZodiacWheel({ date }: IZodiacWheelProps) {
  const zodiac = getZodiacSignByDate(date);

  const getWheelRotation = () => {
    const index = zodiacs.indexOf(zodiac);
    if (index === -1) return 0;
    return index * 30;
  };

  return (
    <div className={styles.container}>
      <ZodiacWheelSVG
        currentZodiac={zodiac}
        className={styles["zodiac-wheel"]}
        style={{ transform: `rotate(-${getWheelRotation()}deg)` }}
      />
      <img
        className={styles["wheel-arrow"]}
        src={images("zodiac-wheel-arrow.svg")}
        alt="wheel arrow"
        width={93}
        height={152}
      />
    </div>
  );
}

export default ZodiacWheel;
