import Card from "../UI/Card";
import CardHeader from "../UI/CardHeader";
import { useNPEDContext } from "../../context/NPEDUserContext";

const SessionCard = () => {
  const { sessionStarted, setSessionStarted, sessionList } = useNPEDContext();

  const handleStartClick = () => {
    setSessionStarted(!sessionStarted);
  };

  return (
    <Card>
      <CardHeader title="Session" />
      <div className="flex flex-col gap-4">
        <button
          className="bg-[#26B170] text-white px-4 py-2 rounded hover:bg-green-700 transition w-full"
          onClick={handleStartClick}
        >
          Start Session
        </button>

        <ul className="text-white space-y-2">
          <li>Number of Vehicles: {sessionList.length} </li>
          <li>Vehicles without Tax: </li>
          <li>Vehicles without MOT: </li>
          <li>Vehicles with NPED Cat A: </li>
          <li>Vehicles with NPED Cat B: </li>
          <li>Vehicles with NPED Cat C: </li>
        </ul>
      </div>
    </Card>
  );
};

export default SessionCard;