import { ReactNode } from "react";
import { IoMdCheckmark } from "react-icons/io";

interface BulletListItemProps {
  children: ReactNode;
  variant?: "bullet" | "checkmark";
  bulletColor?: string;
  bulletShape?: "rounded-full" | "rounded-sm";
  checkmarkBg?: string;
  checkmarkColor?: string;
  className?: string;
}

export default function BulletListItem({
  children,
  variant = "bullet",
  bulletColor = "bg-secondary-main",
  bulletShape = "rounded-full",
  checkmarkBg = "bg-primary-8",
  checkmarkColor = "text-primary-main",
  className = "",
}: BulletListItemProps) {
  return (
    <li className="flex gap-3 items-start">
      {variant === "checkmark" ? (
        <span className={`${checkmarkBg} p-1 rounded-full shrink-0`}>
          <IoMdCheckmark
            className={`${checkmarkColor} mt-0.5 shrink-0`}
            size={14}
          />
        </span>
      ) : (
        <div
          className={`w-2 h-2 ${bulletShape} ${bulletColor} shrink-0 mt-1.5`}
        ></div>
      )}
      <p className={`text-[12px] md:text-[14px] ${className}`}>{children}</p>
    </li>
  );
}