import Image from "next/image";
import Link from "next/link";

export default function IdentityButton({
  extraClasses,
  imageObj,
  innerText,
  url,
  locator,
  partners,
}) {
  const images = Array(imageObj).flat();
  const maybeLocator = locator ? `#${locator}` : "";

  return (
    <div className="animate-wiggle container max-w-sm mx-auto md:px-2 p-2">
      <Link
        href={`${url}${maybeLocator}`}
        className={`${extraClasses} block text-lg text-center rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition`}
      >
        {images.map((source) => (
          <span
            key={source.src}
            className="relative inline-block w-4 h-4 align-middle mb-1"
          >
            {" "}
            <Image
              src={source.src}
              layout="fill"
              objectFit="contain"
              alt={source.alt}
            />{" "}
          </span>
        ))}{" "}
        {innerText == "Partners"
          ? partners > 0
            ? `Taken(${partners})`
            : "Single"
          : innerText}
      </Link>
    </div>
  );
}