"use client";

import { useSearchParams, usePathname, useRouter } from "next/navigation";
import { cn }                                      from "@/lib/utils";

export function DateSelector({
  years
}: {
  years?: number[];
}) {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();

  const toParam = searchParams.get("to");
  const selectedYear = toParam && !isNaN(new Date(toParam).getTime())
    ? new Date(toParam).getFullYear()
    : new Date().getFullYear();

  const handleYearClick = (year: number) => {
    const params = new URLSearchParams(searchParams.toString());
    params.set("from", `${year}-12-01`);
    params.set("to", `${year}-12-31`);
    router.replace(`${pathname}?${params.toString()}`);
  };

  return (
    <div className="sticky top-4">
      {years && years.length > 0 && (
        <div className="flex flex-col space-y-2">
          {years.map((year) => (
            <button
              key={year}
              onClick={() => handleYearClick(year)}
              className={cn(
                "text-left transition-colors cursor-pointer text-sm",
                selectedYear === year
                  ? "text-gray-900 font-semibold"
                  : "text-gray-400 hover:text-gray-900"
              )}
            >
              {year}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}