'use client';

import { Input } from '@/components/ui/input';
import type { FieldConfig } from '@/types/invyone-component';

interface DateTimeFieldProps {
  field: FieldConfig;
  value: any;
  onChange: (value: any) => void;
  mode: 'form' | 'search';
  disabled?: boolean;
  error?: string;
}

export function DateTimeField({ field, value, onChange, mode, disabled, error }: DateTimeFieldProps) {
  if (mode === 'search') {
    const from = value?.from ?? '';
    const to = value?.to ?? '';
    return (
      <div className="flex items-center gap-1">
        <Input
          type="datetime-local"
          value={from}
          onChange={(e) => onChange({ ...value, from: e.target.value || undefined })}
          disabled={disabled}
          className={`h-7 text-xs flex-1 ${error ? 'border-destructive' : ''}`}
        />
        <span className="text-xs text-[var(--v5-text-muted)]">~</span>
        <Input
          type="datetime-local"
          value={to}
          onChange={(e) => onChange({ ...value, to: e.target.value || undefined })}
          disabled={disabled}
          className={`h-7 text-xs flex-1 ${error ? 'border-destructive' : ''}`}
        />
      </div>
    );
  }

  return (
    <Input
      type="datetime-local"
      value={value ?? ''}
      onChange={(e) => onChange(e.target.value || null)}
      disabled={disabled}
      className={`h-7 text-xs ${error ? 'border-destructive' : ''}`}
    />
  );
}
