import * as React from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { DayPicker } from "react-day-picker";
import "react-day-picker/style.css";

import { cn } from "@/shared/lib/utils";
import { buttonVariants } from "@/shared/common/ui/button";

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: React.ComponentProps<typeof DayPicker>) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      {...props}
      className={cn(
        "rdp w-full rounded-xl border border-slate-200 bg-white p-3 shadow-[0_10px_30px_-20px_rgba(15,23,42,0.5)] dark:border-slate-700 dark:bg-slate-900",
        className,
      )}
      classNames={{
        months: "rdp-months flex flex-col gap-4 sm:flex-row sm:gap-6",
        month: "rdp-month space-y-4",
        caption: "rdp-caption relative flex items-center justify-center pt-1",
        caption_label:
          "rdp-caption_label text-sm font-semibold tracking-wide text-slate-800 dark:text-slate-100",
        nav: "rdp-nav flex items-center gap-1",
        nav_button: cn(
          "rdp-nav_button",
          buttonVariants({ variant: "ghost", size: "icon" }),
          "h-8 w-8 rounded-lg text-slate-600 hover:bg-slate-100 hover:text-slate-900 dark:text-slate-300 dark:hover:bg-slate-800 dark:hover:text-slate-100",
        ),
        nav_button_previous: "rdp-nav_button_previous absolute left-0",
        nav_button_next: "rdp-nav_button_next absolute right-0",
        table: "rdp-table w-full border-collapse space-y-1",
        head_row: "rdp-head_row flex w-full justify-between",
        head_cell:
          "rdp-head_cell text-slate-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-slate-400 uppercase tracking-wide text-center pt-1 mb-2 whitespace-nowrap",
        row: "rdp-row flex w-full justify-between mt-1",
        cell: cn(
          "rdp-cell relative h-9 w-9 p-0 text-center text-sm focus-within:relative focus-within:z-10",
          props.mode === "range"
            ? "[&:has([aria-selected].day-range-end)]:rounded-r-lg [&:has([aria-selected].day-range-start)]:rounded-l-lg [&:has([aria-selected].day-range-middle)]:bg-primary-50 dark:[&:has([aria-selected].day-range-middle)]:bg-primary-900/30"
            : "",
        ),
        day: cn(
          "rdp-day",
          buttonVariants({ variant: "ghost" }),
          "h-9 w-9 rounded-lg p-0 font-medium text-slate-700 hover:bg-slate-100 hover:text-slate-900 focus-visible:ring-2 focus-visible:ring-primary-500/30 aria-selected:opacity-100 dark:text-slate-200 dark:hover:bg-slate-800 dark:hover:text-white",
        ),
        day_selected:
          "rdp-day_selected bg-primary-600 text-white hover:bg-primary-600 hover:text-white focus:bg-primary-600 focus:text-white dark:bg-primary-500 dark:hover:bg-primary-500",
        day_today:
          "rdp-day_today border border-primary-300 bg-primary-50 text-primary-700 dark:border-primary-500/50 dark:bg-primary-900/30 dark:text-primary-300",
        day_outside:
          "rdp-day_outside text-slate-400 opacity-60 aria-selected:bg-primary-100 aria-selected:text-primary-700 dark:text-slate-600 dark:aria-selected:bg-primary-900/40 dark:aria-selected:text-primary-300",
        day_disabled: "rdp-day_disabled text-slate-300 opacity-50 dark:text-slate-600",
        day_range_middle:
          "rdp-day_range_middle aria-selected:bg-primary-100 aria-selected:text-primary-800 dark:aria-selected:bg-primary-900/40 dark:aria-selected:text-primary-200",
        day_range_start:
          "rdp-day_range_start day-range-start aria-selected:bg-primary-600 aria-selected:text-white",
        day_range_end:
          "rdp-day_range_end day-range-end aria-selected:bg-primary-600 aria-selected:text-white",
        day_hidden: "rdp-day_hidden invisible",
        ...classNames,
      }}
      // Removed unsupported 'Chevron' component override
    />
  );
}

export { Calendar };
