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

export default function PageButton({ title, images, url, extra_classes }) {
  return (
    <div className="">
      <Link href={url}>
        <a
          className={`${extra_classes} sm:p-2 p-1 w-full inline-block ring-2 ring-werefox-grey-darker dark:ring-werefox-grey-light 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}
              className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
            >
              <Image
                src={source.src}
                layout="fill"
                objectFit="contain"
                alt={source.alt}
              />
            </span>
          ))}{" "}
          {title}
        </a>
      </Link>
    </div>
  );
}