'use client';

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

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

/**
 * type='daterange' — 시작일 ~ 종료일.
 * value 형식: { from: 'YYYY-MM-DD', to: 'YYYY-MM-DD' }
 * form / search 모드 동일.
 */
export function DateRangeField({ value, onChange, disabled, error }: DateRangeFieldProps) {
  const from = value?.from ?? '';
  const to = value?.to ?? '';
  return (
    <div className="flex items-center gap-1">
      <Input
        type="date"
        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="date"
        value={to}
        onChange={(e) => onChange({ ...value, to: e.target.value || undefined })}
        disabled={disabled}
        className={`h-7 text-xs flex-1 ${error ? 'border-destructive' : ''}`}
      />
    </div>
  );
}
