"use client"
import { useState } from "react"
import * as React from "react"
import { format, toDate } from "date-fns"
import { Calendar as CalendarIcon } from "lucide-react"
import { cn } from "../../../lib/utils"
import { Button } from "../../../components/ui/Button/button"
import { Calendar } from "../../../components/ui/Calendar/calendar"
import { cva, type VariantProps } from "class-variance-authority";
 
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "../../../components/ui/Calendar/popover"

const datePickerVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default:
          "text-secondary-foreground hover:bg-primary/20 active:scale-95 transition",
        outline:
          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground active:scale-95 transition",
        custom:
        "hover:bg-cyan-500"
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9",
      },
    },
    defaultVariants: {
      variant: "default"
    },
  }
);
interface DatePickerDemoProps extends VariantProps<typeof datePickerVariants> {
  enabledDates?: Date[];
  enabledDatesStyles?: string;
  fromDate?:Date,
  toDate?:Date,
} 
export function DatePickerDemo({
  enabledDates,
  enabledDatesStyles,
  fromDate,
  toDate,
  variant

}: DatePickerDemoProps) {
  const [date, setDate] = React.useState<Date>();
  
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant={"outline"}
          className={cn(
            "w-[280px] justify-start text-left font-normal",
            !date && "text-muted-foreground"
          )}
        >
          <CalendarIcon className="mr-2 h-4 w-4" />
          {date ? format(date, "PPP") : <span>Pick a date</span>}
        </Button>
      </PopoverTrigger>
      
      <PopoverContent className="w-auto p-0">
        <div className="flex p-2">
          <Calendar
            mode="single"
            selected={date}
            onSelect={setDate}
            enabledDates={enabledDates}
            enabledDatesStyles={enabledDatesStyles}
            fromDate={fromDate}
            toDate={toDate}  
            variant={variant}
          />
        </div>
      </PopoverContent>
    </Popover>
  )
}
