"use client";

import { Calendar } from "@/components/ui/calendar";
import { useDateContext } from "@/context/DateContext";
import { usePageContext } from "@/context/PageContext";
import classNames from "classnames"; // Optional: use if you're using clsx/classnames for cleaner conditional styling

const Sidebar = () => {
  const { date, setDate } = useDateContext();
  const { currentPage, setCurrentPage } = usePageContext();

  const pages = [
    `${date?.toLocaleDateString()}`,
    ...Array.from({ length: 10 }, (_, i) => `Page ${i + 1}`),
  ];

  return (
    <div className="w-1/4 flex flex-col gap-6 p-4">
      <h1 className="text-2xl font-semibold">Today's Paper</h1>

      {/* Page Buttons */}
      <div className="flex flex-col w-full gap-1">
        {pages.map((page, idx) => (
          <button
            key={idx}
            className={classNames(
              "py-2 px-4 text-left text-lg tracking-tight rounded transition-colors duration-200 hover:cursor-pointer",
              {
                "bg-slate-800 text-white": currentPage === idx,
                "bg-slate-200 hover:bg-slate-300 text-black":
                  currentPage !== idx,
                "bg-slate-700 text-white": idx === 0, // disabled style
              }
            )}
            disabled={idx === 0}
            onClick={() => setCurrentPage(idx)}
          >
            {page}
          </button>
        ))}
      </div>

      {/* Calendar Date Picker */}
      <Calendar
        mode="single"
        selected={date}
        onSelect={setDate}
        className="border rounded-md p-2 shadow-sm"
      />
    </div>
  );
};

export default Sidebar;
