"use client";

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

import { cn } from "./utils";
import { buttonVariants } from "./button";

function Calendar({
                      className,
                      classNames,
                      showOutsideDays = true,
                      ...props
                  }: React.ComponentProps<typeof DayPicker>) {
    return (
        <DayPicker
            showOutsideDays={showOutsideDays}
            className={cn("p-0 w-full", className)}
            classNames={{
                months: "flex flex-col sm:flex-row gap-0 w-full h-full",
                month: "flex flex-col gap-2 w-full h-full",
                month_caption: "flex justify-center pt-0 relative items-center w-full mb-2",
                caption_label: "text-lg md:text-xl font-bold",
                nav: "flex items-center gap-2",
                button_previous: cn(
                    buttonVariants({ variant: "outline" }),
                    "size-8 md:size-9 bg-transparent p-0 opacity-60 hover:opacity-100 hover:bg-primary/10 absolute left-0",
                ),
                button_next: cn(
                    buttonVariants({ variant: "outline" }),
                    "size-8 md:size-9 bg-transparent p-0 opacity-60 hover:opacity-100 hover:bg-primary/10 absolute right-0",
                ),
                month_grid: "w-full h-full border-collapse flex flex-col mt-2",
                weekdays: "flex w-full mb-1",
                weekday:
                    "text-muted-foreground rounded-md flex-1 font-semibold text-sm md:text-base",
                week: "flex w-full mt-0 flex-1",
                day: cn(
                    "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 flex-1",
                    props.mode === "range"
                        ? "[&:has(>.range-end)]:rounded-r-md [&:has(>.range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
                        : "",
                ),
                day_button: cn(
                    "w-full h-full p-0 font-normal aria-selected:opacity-100",
                ),
                range_start:
                    "range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
                range_end:
                    "range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
                selected:
                    "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
                today: "bg-accent text-accent-foreground",
                outside:
                    "outside text-muted-foreground/40 aria-selected:text-muted-foreground",
                disabled: "text-muted-foreground opacity-30",
                range_middle:
                    "aria-selected:bg-accent aria-selected:text-accent-foreground",
                hidden: "invisible",
                ...classNames,
            }}
            components={{
                Chevron: ({ orientation, ...props }) => {
                    const Icon = orientation === "left" ? ChevronLeft : ChevronRight;
                    return <Icon className="size-5" {...props} />;
                },
            }}
            {...props}
        />
    );
}

export { Calendar };
