import React from "react";
import DatePicker from "@/components/ui/DatePicker";

interface BaseDateFieldProps<T extends string = string> {
  label: string;
  value: string;
  setValue: (value: string) => void;
  formatDateToString: (date: Date) => string;
  enableHoverEffects?: boolean;
  className?: string;
  // Optional validation props
  clearError?: (field: T) => void;
  errors?: Partial<Record<T, string>>;
  handleFieldBlur?: (field: T, validateField: (field: T) => string | undefined) => void;
  validateField?: (field: T) => string | undefined;
  fieldName?: T;
}

export function BaseDateField<T extends string = string>({
  label,
  value,
  setValue,
  formatDateToString,
  enableHoverEffects = false,
  className = "",
  clearError,
  errors,
  handleFieldBlur,
  validateField,
  fieldName
}: BaseDateFieldProps<T>) {
  const containerClasses = enableHoverEffects
    ? `group transition-all duration-200 hover:shadow-md hover:shadow-[#428B4D]/10 ${className}`
    : `group ${className}`;

  const pickerClasses = enableHoverEffects
    ? "text-sm transition-all duration-200 group-hover:border-[#428B4D]/50 group-hover:shadow-md group-hover:shadow-[#428B4D]/10"
    : "text-sm transition-all duration-200 group-hover:shadow-md";

  const handleChange = (date: Date) => {
    setValue(formatDateToString(date));
    if (clearError && fieldName) {
      clearError(fieldName);
    }
  };

  const handleBlur = () => {
    if (handleFieldBlur && validateField && fieldName) {
      handleFieldBlur(fieldName, validateField);
    }
  };

  return (
    <div className={containerClasses}>
      <DatePicker
        label={label}
        value={value}
        onChange={handleChange}
        onBlur={handleBlur}
        className={pickerClasses}
        error={fieldName && errors?.[fieldName]}
      />
    </div>
  );
}