Mav-Mobile-UI/src/components/SessionForm/HitSearchCard.tsx

import Card from "../UI/Card";
import CardHeader from "../UI/CardHeader";
import FormGroup from "../SettingForms/components/FormGroup";
import { useAlertHitContext } from "../../context/AlertHitContext";
import { useState } from "react";

const SessionCard = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const { dispatch } = useAlertHitContext();

  return (
    <Card>
      <CardHeader title={"Hit Search"} />
      <div className="flex flex-col gap-4">
        <FormGroup>
          <label
            htmlFor="VRM"
            className="font-medium whitespace-nowrap md:w-1/2 text-left"
          >
            VRM (Min 2 letters)
          </label>
          <div className="flex-1 flex justify-end md:w-2/3">
            <input
              id="VRMSelect"
              name="VRMSelect"
              type="text"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-xs"
              placeholder="Enter VRM"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
        </FormGroup>
        <button
          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full max-w-md"
          onClick={() => dispatch({ type: "SEARCH", payload: searchTerm })}
          disabled={searchTerm.trim().length < 2}
        >
          Search Hit list
        </button>
        {searchTerm && (
          <button
            className="bg-gray-300 text-gray-900 px-4 py-2 rounded hover:bg-gray-700 transition w-full max-w-md"
            onClick={() => {
              setSearchTerm("");
              dispatch({ type: "SEARCH", payload: "" });
            }}
          >
            Clear Search
          </button>
        )}
      </div>
    </Card>
  );
};

export default SessionCard;