import { VehicleData } from "@/app/_globalRedux/services/types/getListVehiclesmobTypes";
import { PeopleIcon } from "@/public/assets/svgs/nav";
import { Tooltip } from "antd";
import Image from "next/image";
import React from "react";

const Passenger = ({ data }: { data: VehicleData }) => {
  const passengerVehicles = ["AR20B4001", "AR20B4002", "AR20B4003"];
  const shouldShowPassengerIcon = passengerVehicles.includes(data.vehReg);

  const handlePassengerClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    window.open(
      `/dashboard/passenger-counting?serviceId=${data.vId}`,
      "_blank"
    );
  };

  return (
    <>
      {shouldShowPassengerIcon ? (
        <Tooltip title="Passenger Counting" mouseEnterDelay={1}>
          <div
            className="w-[20px] cursor-pointer"
            onClick={handlePassengerClick}
          >
            <Image
              src={PeopleIcon}
              alt="passenger vehicle icon"
              width={15}
              height={15}
            />
          </div>
        </Tooltip>
      ) : null}
    </>
  );
};

export default Passenger;