type SwiperPaginationBulletsProps = {
  className?: string;
  currentBullet: number;
  bulletCount: number;
  handleOnBulletSwitch: (updatedBullet: number) => void;
};

const SwiperPaginationBullets = ({
  className,
  currentBullet,
  bulletCount,
  handleOnBulletSwitch,
}: SwiperPaginationBulletsProps) => {
  const bullets = Array.from({ length: bulletCount }, (_, index) => {
    return { id: index + 1 };
  });

  return (
    <div className={`${className ? className : ""} flex cursor-pointer`}>
      {bullets.map((bullet) => (
        <div
          className="p-1"
          key={bullet.id}
          onClick={() => handleOnBulletSwitch(bullet.id)}
        >
          <div
            className={`w-2 h-2  rounded-full  ${
              currentBullet === bullet.id ? "bg-white" : "opacity-20 bg-black"
            }`}
          ></div>
        </div>
      ))}
    </div>
  );
};

export default SwiperPaginationBullets;
