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 (
      <div className="rounded-lg container ring-4 ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey">
        {children}
      </div>
    );
  } else if (isCardButton) {
    return (
      <div className="container">
        <Link href={url}>
          <a
            className={`${extraClasses} block ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker rounded-lg p-4 text-xl text-center text-werefox-grey dark:text-werefox-grey-dark bg-werefox-grey-lighter dark:bg-werefox-grey-lightest transition hover:bg-werefox-grey-lightest dark:hover:bg-werefox-grey-light`}
          >
            {images.map((source) => (
              <span
                key={source.src}
                className="relative inline-block w-8 h-8 align-middle mb-1"
              >
                {" "}
                <Image
                  src={source.src}
                  layout="fill"
                  objectFit="contain"
                  alt={source.alt}
                />{" "}
              </span>
            ))}{" "}
            {innerText}
          </a>
        </Link>
      </div>
    );
  }
  return (
    <div className="rounded-lg container ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
      {children}
    </div>
  );
}
