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

export default function IdentityButton({
  extraClasses,
  imageObj,
  innerText,
  url,
  locator,
}) {
  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 ring-2 ring-werefox-grey-darker dark:ring-werefox-grey-darker rounded-lg text-lg text-center text-werefox-grey-lighter dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-lightest transition hover:bg-werefox-grey-dark dark:hover:bg-werefox-grey-light`}
        >
          {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}
        </a>
      </Link>
    </div>
  );
}