import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet";

const Flights = () => {
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useState({
    origin: "",
    destination: "",
    date: "",
    passengers: 1,
  });

  const handleSearch = () => {
    if (!searchParams.origin || !searchParams.destination || !searchParams.date) {
      alert("Please fill all fields");
      return;
    }
    navigate(`/flights/results?origin=${searchParams.origin}&destination=${searchParams.destination}&date=${searchParams.date}&passengers=${searchParams.passengers}`);
  };

  return (
    <div className="container mt-5">
      <Helmet>
        <title>hlafly - Search Flights</title>
        <meta name="description" content="Search for flights and get the best deals." />
      </Helmet>

      <h1 className="mb-4">Search Flights</h1>

      <div className="row">
        <div className="col-md-3">
          <label>From</label>
          <input
            type="text"
            className="form-control"
            placeholder="Enter origin"
            value={searchParams.origin}
            onChange={(e) => setSearchParams({ ...searchParams, origin: e.target.value })}
          />
        </div>
        <div className="col-md-3">
          <label>To</label>
          <input
            type="text"
            className="form-control"
            placeholder="Enter destination"
            value={searchParams.destination}
            onChange={(e) => setSearchParams({ ...searchParams, destination: e.target.value })}
          />
        </div>
        <div className="col-md-3">
          <label>Date</label>
          <input
            type="date"
            className="form-control"
            value={searchParams.date}
            onChange={(e) => setSearchParams({ ...searchParams, date: e.target.value })}
          />
        </div>
        <div className="col-md-2">
          <label>Passengers</label>
          <input
            type="number"
            className="form-control"
            min="1"
            value={searchParams.passengers}
            onChange={(e) => setSearchParams({ ...searchParams, passengers: e.target.value })}
          />
        </div>
        <div className="col-md-1 d-flex align-items-end">
          <button className="btn btn-primary w-100" onClick={handleSearch}>Search</button>
        </div>
      </div>
    </div>
  );
};

export default Flights;