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}`}>
        <a
          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}
        </a>
      </Link>
    </div>
  );
}
