import { FilterRangeAmountProps } from '@/entities/common/model/types';
import { useEffect } from 'react';
import { useState } from 'react';
import { ChangeEvent } from 'react';

export const FilterRangeAmount = ({
  title,
  minAmount,
  maxAmount,
  setMinAmount,
  setMaxAmount,
}: FilterRangeAmountProps) => {
  const [filterTitle, setFilterTitle] = useState<string>(title || '거래금액');

  useEffect(() => {
    setFilterTitle(title || '거래금액');
  }, [title])
  return (
    <>
      <div className="opt-field">
        <div className="opt-label">{ filterTitle }</div>
        <div className="opt-controls">
          <div className="input-wrapper ">
            <input
              type="number"
              placeholder=""
              value={ minAmount }
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setMinAmount(e.target.value) }
            />
          </div>
          <span> ~ </span>
          <div className="input-wrapper date">
            <input
              type="number"
              placeholder=""
              value={ maxAmount }
              onChange={ (e: ChangeEvent<HTMLInputElement>) => setMaxAmount(e.target.value) }
            />
          </div>
        </div>
      </div>
    </>
  )
};