import DatePicker from "@/components/ui/date-picker";
import { cn } from "@/lib/utils";
import { TCaptionLayout } from "@/shared/types";
import React from "react";

type TLabeledDatePickerProps = {
  label?: string;
  dateRangeDateFrom: Date | undefined;
  setDateRangeDateFrom: React.Dispatch<React.SetStateAction<Date | undefined>>;
  containerStyle?: string;
  labelStyle?: string;
  datePickerStyle?: string;
  captionLayout?: TCaptionLayout;
  disabled?: boolean;
};

const LabeledDatePicker = ({
  label,
  dateRangeDateFrom,
  setDateRangeDateFrom,
  labelStyle,
  containerStyle,
  datePickerStyle,
  captionLayout,
  disabled,
}: TLabeledDatePickerProps) => {
	return (
		<div className={cn(`flex flex-col gap-1.5 w-full`, containerStyle)}>
			{label && <p className={cn(`text-[12px] leading-[140%] text-[#6E6E6E]`, labelStyle)}>{label}</p>}
			<DatePicker
				style={datePickerStyle}
				date={dateRangeDateFrom}
				setDate={setDateRangeDateFrom}
        captionLayout={captionLayout}
        disabled={disabled}
			/>
		</div>
	);
};

export default LabeledDatePicker;