'use client';

import { Input } from '@admin/components/ui/input';
import { cn } from '@admin/utils/common';
import { Calendar } from 'lucide-react';
import { Controller, useFormContext } from 'react-hook-form';

interface DateFieldProps {
    name: string;
    type: 'date' | 'datetime-local' | 'time';
    placeholder?: string;
    disabled?: boolean;
    className?: string;
}

export const DateField = ({ name, type, placeholder, disabled, className }: DateFieldProps) => {
    const { control } = useFormContext();

    return (
        <Controller
            control={control}
            name={name}
            render={({ field }) => (
                <div className="relative">
                    <Input
                        {...field}
                        type={type}
                        placeholder={placeholder}
                        disabled={disabled}
                        className={cn('pr-10', className)}
                        value={field.value || ''}
                    />
                    <Calendar className="absolute top-1/2 right-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
                </div>
            )}
        />
    );
};