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

export default function WerefoxCard({
  isTitle,
  isCardButton,
  extraClasses,
  imageObj,
  innerText,
  url,
  children,
}) {
  const images = Array(imageObj).flat();
  if (isTitle) {
    return (
      <header className="rounded-lg ring-4 ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey">
        {children}
      </header>
    );
  } else if (isCardButton) {
    return (
      <div className="">
        <Link href={url}>
          <a
            className={`${extraClasses} 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.src}
                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>
            ))}{" "}
            {innerText}
          </a>
        </Link>
      </div>
    );
  }
  return (
    <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
      {children}
    </div>
  );
}