'use client';

import { formatDateForDateTimeInput, parseDateTimeInput } from '@/lib/date-utils';

interface DateTimeInputProps {
  value?: Date;
  onChange: (date: Date | undefined) => void;
  placeholder?: string;
  disabled?: boolean;
  className?: string;
  onFocus?: () => void;
}

export function DateTimeInput({ 
  value, 
  onChange, 
  placeholder,
  disabled = false, 
  className = '',
  onFocus
}: DateTimeInputProps) {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value ? parseDateTimeInput(e.target.value) : undefined;
    onChange(newValue);
  };

  return (
    <input
      type="datetime-local"
      value={value ? formatDateForDateTimeInput(value) : ''}
      onChange={handleChange}
      onFocus={onFocus}
      disabled={disabled}
      placeholder={placeholder}
      className={`bg-transparent border-none outline-none text-[var(--muted-foreground)] font-mono text-xs flex-shrink min-w-0 ${className}`}
    />
  );
}