interface DateRangeInputProps {
  startDate: string;
  endDate: string;
  onStartChange: (value: string) => void;
  onEndChange: (value: string) => void;
  startLabel?: string;
  endLabel?: string;
}

/** 시작일~종료일 날짜 입력 (자동 보정) */
export default function DateRangeInput({
  startDate,
  endDate,
  onStartChange,
  onEndChange,
  startLabel = "시작일",
  endLabel = "종료일",
}: DateRangeInputProps) {
  const handleStartChange = (value: string) => {
    onStartChange(value);
    if (endDate && value > endDate) onEndChange(value);
  };

  const handleEndChange = (value: string) => {
    onEndChange(value);
    if (startDate && value < startDate) onStartChange(value);
  };

  return (
    <>
      {/* 시작일 */}
      <div className="flex-1">
        <label className="block text-xs font-medium text-gray-600 mb-1.5">
          {startLabel}
        </label>
        <div className="relative">
          <span className="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-gray-400 text-base">
            calendar_today
          </span>
          <input
            type="date"
            value={startDate}
            onChange={(e) => handleStartChange(e.target.value)}
            className="w-full h-[38px] pl-10 pr-3 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
          />
        </div>
      </div>

      <span className="text-gray-400 text-sm font-medium pb-2">~</span>

      {/* 종료일 */}
      <div className="flex-1">
        <label className="block text-xs font-medium text-gray-600 mb-1.5">
          {endLabel}
        </label>
        <div className="relative">
          <span className="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-gray-400 text-base">
            calendar_today
          </span>
          <input
            type="date"
            value={endDate}
            onChange={(e) => handleEndChange(e.target.value)}
            className="w-full h-[38px] pl-10 pr-3 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors"
          />
        </div>
      </div>
    </>
  );
}