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

export default function PageButton({
  title,
  images,
  url,
  extra_classes,
  new_tab,
}) {
  if (Boolean(new_tab)) {
    return (
      <div>
        <Link href={url}>
          <a
            className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark 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 focus:text-alice-werefox-blue-dark dark:focus:text-alice-werefox-blue-light hover:animate-yip transition`}
            target="_blank"
          >
            {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>
    );
  } else {
    return (
      <div>
        <Link href={url}>
          <a
            className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark 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 focus:text-alice-werefox-blue-dark dark:focus:text-alice-werefox-blue-light hover:animate-yip transition`}
          >
            {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>
    );
  }
}
