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

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