'use client';

import { useState } from 'react';

interface Props {
  onSearch: (desde: string, hasta: string) => void;
}

function SearchDateBetween({ onSearch }: Props) {
  const [startDate, setStartDate] = useState('');
  const [endDate, setEndDate] = useState('');

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!startDate || !endDate) return;
    onSearch(startDate, endDate);
  };

  return (
    <form className="containerForm" onSubmit={handleSubmit}>
      <label className="label">Desde</label>
      <div className="groupInput">
        <input
          type="date"
          value={startDate}
          onChange={(e) => setStartDate(e.target.value)}
        />
      </div>

      <label className="label">Hasta</label>
      <div className="groupInput">
        <input
          type="date"
          value={endDate}
          onChange={(e) => setEndDate(e.target.value)}
        />
      </div>

      <button className="button buttonSearch" type="submit" style={{marginBottom:"10px"}}>
        Buscar
      </button>
    </form>
  );
}

export default SearchDateBetween;