select date custom comp

import { useState, useEffect, useRef } from "react";
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover";
import { Button } from "../ui/button";
import { Calendar } from "../ui/calendar";
import moment from "moment";
import { cn } from "@/lib/utils";
import { CalendarDays } from "lucide-react";

export const SelectDate = ({
selected,
className,
onSelect,
disabled,
disableClick,
placeholder = "Select a date",
autoFocus,
}: {
selected?: any;
className?: string;
onSelect: (date: string | undefined) => void;
disabled?: any;
placeholder?: string;
disableClick?: boolean;
autoFocus?: boolean;
}) => {
const [open, setOpen] = useState(false);
const buttonRef = useRef(null);

useEffect(() => {
if (autoFocus && buttonRef.current && !disableClick) {
const timer = setTimeout(() => {
buttonRef.current?.focus();
}, 150);
return () => clearTimeout(timer);
}
}, [autoFocus, disableClick]);

return (


ref={buttonRef}
disabled={disableClick}
className={cn(
"hover:bg-custom-gray-bg-1 focus:border-custom-blue-border-1! w-full justify-between text-left font-medium bg-custom-gray-bg-1 border border-custom-gray-border-1 outline-none focus:ring-2 cursor-pointer focus:ring-custom-blue-focusring! text-custom-gray-text-1 transition-all placeholder:text-custom-gray-text-1 ",
{
"text-custom-gray-text-1": !selected,
},
className,
)}
>
{selected ? moment(selected).format("DD/MM/YYYY") : placeholder}



className="pointer-events-auto z-10000 w-auto overflow-hidden p-0"
align="start"
>
mode="single"
selected={selected ? new Date(selected) : undefined}
onSelect={(date) => {
onSelect(date ? moment(date).format("YYYY-MM-DD") : undefined);
setOpen(false);
}}
disabled={disabled}
captionLayout="dropdown"
startMonth={new Date(1900, 0)}
endMonth={new Date(new Date().getFullYear() + 10, 11)}
/>


);
};