"use client";

import Link from "@/app/components/LocaleLink";
import { usePathname } from "next/navigation";

interface HoroscopeSidebarProps {
  zodiac: string;
}

const menuItems = [
  {
    label: "Daily Horoscope",
    path: "daily-horoscope",
  },
  {
    label: "Tomorrow's Horoscope",
    path: "tomorrow-horoscope",
  },
  {
    label: "Weekly Horoscope",
    path: "weekly-horoscope",
  },
  // {
  //   label: "Monthly Horoscope",
  //   path: "monthly-horoscope",
  // },
  {
    label: "Yearly Horoscope",
    path: "yearly-horoscope",
  },
];

export default function HoroscopeSidebar({
  zodiac,
}: HoroscopeSidebarProps) {
  const pathname = usePathname();

  return (
    <aside className="horoscope-sidebar">
      <div className="horoscope-sidebar-card">
        <h4 className="horoscope-sidebar-heading">
          More for {zodiac.charAt(0).toUpperCase() + zodiac.slice(1)}
        </h4>

        {menuItems.map((item) => {
          const href =
            `/horoscope/${item.path}/${zodiac}`;

          const isActive =
            pathname === href ||
            pathname.startsWith(`${href}/`);

          return (
            <Link
              key={item.path}
              href={href}
              className={`horoscope-sidebar-item ${
                isActive
                  ? "horoscope-sidebar-item-active"
                  : ""
              }`}
            >
              <span>{item.label}</span>

              <span className="horoscope-sidebar-arrow">
                ›
              </span>
            </Link>
          );
        })}
      </div>

      <div className="horoscope-cta-card">
        <h4>Want a personal reading?</h4>

        <p>
          Get a 1:1 chat with a senior astrologer for guidance
          tailored to you.
        </p>

        <Link
          href="/chat-with-astrologer"
          className="horoscope-cta-btn"
        >
          Chat with Astrologer
        </Link>
      </div>
    </aside>
  );
}