"use client";

import Link from "@/app/components/LocaleLink";
import { useZodiacSigns } from "../../lib/useZodiacSigns";
import ZodiacImage from "./ZodiacImage";

interface Props {
  type:
    | "daily-horoscope"
    | "tomorrow-horoscope"
    | "yesterday-horoscope"
    | "weekly-horoscope"
    | "monthly-horoscope"
    | "yearly-horoscope";

  activeZodiac?: string;
}

export default function ZodiacNavigation({
  type,
  activeZodiac,
}: Props) {
  const { signs, imagesLoaded } = useZodiacSigns();

  return (
    <div className="zodiac-navigation">

      {signs.map((zodiac) => (
        <Link
          key={zodiac.slug}
          href={`/horoscope/${type}/${zodiac.slug}`}
          className={`zodiac-item ${
            activeZodiac === zodiac.slug
              ? "active"
              : ""
          }`}
        >
          <span className="zodiac-icon">
            <ZodiacImage
              svgImage={zodiac.svgImage}
              symbol={zodiac.symbol}
              name={zodiac.name}
              loading={!imagesLoaded}
            />
          </span>

          <span className="zodiac-name">
            {zodiac.name}
          </span>
        </Link>
      ))}

    </div>
  );
}