"use client";

import { useState } from "react";

import "./SearchDate.css";
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 containerDate" onSubmit={handleSubmit}>
      <div className="alingDate">
        <div className="">
          <label className="label">Desde</label>
          <div className="groupInput">
            <input
              type="date"
              value={startDate}
              onChange={(e) => setStartDate(e.target.value)}
            />
          </div>
        </div>

        <div>
          <label className="label">Hasta</label>

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

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

export default SearchDateBetween;