"use client";

import { format, parse } from "date-fns";
import { CalendarIcon } from "lucide-react";
import { Button } from "./button";
import { cn } from "../../../lib/utils";
import { Popover, PopoverContent, PopoverTrigger } from "./popover";

// import { Button } from "@/components/ui/button";
// import { Calendar } from "@/components/ui/calendar";
// import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
// import { cn } from "@/lib/utils";

export function BirthCalendar({ value, setValue }) {
  // Convert string date to Date object if needed
  const parseDate = (dateValue) => {
    if (!dateValue) return undefined;
    if (dateValue instanceof Date) return dateValue;
    try {
      // Parse date string in DD-MM-YYYY format
      return parse(dateValue, "dd-MM-yyyy", new Date());
    } catch (error) {
      console.error("Date parsing error:", error);
      return undefined;
    }
  };

  const parsedDate = parseDate(value);

  // Format date for display
  const getFormattedDate = (date) => {
    if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
      return "Pick a date";
    }
    return format(date, "dd-MM-yyyy");
  };

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="ghost"
          className={cn(
            "w-full justify-start border text-left font-normal",
            !parsedDate && "text-muted-foreground"
          )}>
          <CalendarIcon className="mr-2 h-4 w-4" />
          {getFormattedDate(parsedDate)}
        </Button>
      </PopoverTrigger>

      <PopoverContent className="w-auto p-0">
        <Calendar
          mode="single"
          selected={parsedDate}
          captionLayout="dropdown-buttons"
          onSelect={setValue}
          initialFocus
          disabled={(date) => date > new Date() || date < new Date("1900-01-01")}
          fromYear={1950}
          toYear={2050}
        />
      </PopoverContent>
    </Popover>
  );
}