"use client";

import * as React from "react";
import { format } from "date-fns";
import { CalendarIcon } from "lucide-react";

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

type DatePickerProps = {
	date: Date | undefined;
	setDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
	style?: string;
  captionLayout?: TCaptionLayout;
  disabled?: boolean;
};

function DatePicker({ date, setDate, style, captionLayout, disabled }: DatePickerProps) {
	return (
		<Popover>
			<PopoverTrigger asChild>
				<Button
					variant={"outline"}
					disabled={disabled}
					className={cn(
						"justify-start text-left font-normal",
						!date && "text-muted-foreground",
						disabled && "opacity-50 cursor-not-allowed",
						style
					)}>
					<CalendarIcon />
					{date ? format(date, "PPP") : <span>Pick a date</span>}
				</Button>
			</PopoverTrigger>
			{!disabled && (
				<PopoverContent className='w-auto p-0' align='start'>
					<Calendar
						mode='single'
						selected={date}
						onSelect={setDate}
						className='rounded-md border shadow-sm'
						captionLayout={captionLayout}
						disabled={disabled}
						// initialFocus
					/>
				</PopoverContent>
			)}
		</Popover>
	);
}
export default DatePicker;