import { useStoreDispatch } from "../../../hooks/useStoreDispatch";
import VehicleSessionItem from "../../UI/VehicleSessionItem";

const StoreFields = () => {
  const { storeQuery } = useStoreDispatch();

  const totalPending = storeQuery?.data?.totalPending;
  const totalActive = storeQuery?.data?.totalActive;
  const totalSent = storeQuery?.data?.totalSent;
  const totalReceived = storeQuery?.data?.totalReceived;
  const totalLost = storeQuery?.data?.totalLost;

  if (storeQuery.isLoading) return <div className="p-4">Loading store data...</div>;
  if (storeQuery.error) return <div className="p-4">Error: {storeQuery.error.message}</div>;

  return (
    <div className="p-4">
      <ul className="text-white space-y-3">
        <VehicleSessionItem sessionNumber={totalActive} textColour="text-gray-400" vehicleTag={"Total Active:"} />
        <VehicleSessionItem sessionNumber={totalSent} textColour="text-blue-400" vehicleTag={"Total Sent:"} />
        <VehicleSessionItem sessionNumber={totalReceived} textColour="text-green-400" vehicleTag={"Total Received:"} />
        <VehicleSessionItem sessionNumber={totalPending} textColour="text-amber-400" vehicleTag={"Total Pending:"} />
        <VehicleSessionItem sessionNumber={totalLost} textColour="text-red-400" vehicleTag={"Total Lost:"} />
      </ul>
    </div>
  );
};

export default StoreFields;