"use client";

import * as React from "react";
import { Button } from "../ui/button";
import { Calendar } from "../ui/calendar";
import { format } from "date-fns";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { Calendar1 } from "lucide-react";

interface DatePickerProps {
  value?: Date;
  onChange?: (date: Date | undefined) => void;
}

export default function DatePicker({ value, onChange }: DatePickerProps) {
  // ✅ set default to today if no value is passed
  const [date, setDate] = React.useState<Date | undefined>(value ?? new Date());

  const handleSelect = (newDate: Date | undefined) => {
    setDate(newDate);
    onChange?.(newDate);
  };

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          className="bg-[#2A2A2A] border-none cursor-pointer"
        >
          <Calendar1 className="mr-2" />
          {date ? format(date, "dd-MM-yyyy") : "Select Date"}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0">
        <Calendar mode="single" selected={date} onSelect={handleSelect} />
      </PopoverContent>
    </Popover>
  );
}