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 className="p-4 col-span-5">
      <CardHeader title={"Hit Search"} />
      <div className="flex flex-col gap-4 px-2">
        <label htmlFor="VRM" className="font-medium whitespace-nowrap md:w-1/2 text-left">
          VRM (Min 2 letters)
        </label>
        <FormGroup>
          <div className="flex flex-row justify-between md:w-full space-x-3">
            <input
              id="VRMSelect"
              name="VRMSelect"
              type="text"
              className="p-2 border border-gray-400 rounded-lg w-full max-w-[70%] focus:border-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400/30"
              placeholder="Enter VRM"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />

            <button
              className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-[30%] mx-3"
              onClick={() => dispatch({ type: "SEARCH", payload: searchTerm })}
              disabled={searchTerm.trim().length < 2}
            >
              Search Hit list
            </button>
          </div>
        </FormGroup>
        {searchTerm && (
          <button
            className="bg-gray-300 text-gray-900 px-4 py-2 rounded hover:bg-gray-700 transition w-[30%] "
            onClick={() => {
              setSearchTerm("");
              dispatch({ type: "SEARCH", payload: "" });
            }}
          >
            Clear Search
          </button>
        )}
      </div>
    </Card>
  );
};

export default SessionCard;