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 { state, disptach } = useAlertHitContext();

  console.log(state);
  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"
              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={() => disptach({ type: "SEARCH", payload: searchTerm })}
        >
          Search Hit list
        </button>
      </div>
    </Card>
  );
};

export default SessionCard;