import React from "react";
import { FormFieldProps } from "react-compose-form";
import { FormFieldContext, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form";
import { DatePicker } from "@/components/ui/date-picker";

export type DateFieldProps = FormFieldProps<{
    label?: string;
    placeholder?: string;
}>;

export const DateField: React.FC<DateFieldProps> = (props) => {
    const {
        label,
        name,
        ...rest
    } = props;

    return (
        <FormFieldContext
          value={{
            name: name as string
          }}>
            <FormItem>
                {label && (
                    <FormLabel>{label}</FormLabel>
                )}

                <FormControl>
                    <DatePicker
                      {...rest} />
                </FormControl>

                <FormMessage />
            </FormItem>
        </FormFieldContext>
    );
};