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

export default function IdentityCard({
  title,
  info,
  url,
  src,
  alt,
  src2,
  alt2,
  children,
}) {
  let infoarray = [];
  let infodict = {};
  if (info) {
    infoarray = info.split("\n");
    infoarray = infoarray.slice(0, infoarray.length - 1);
    infodict = Object.assign({}, infoarray);
  }
  if (children) {
    return (
      <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
        <div className="p-2 space-y-3">
          <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
            <p className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
              <img
                className="object-contain relative inline-block w-8 h-8 align-middle mb-1"
                src={src}
                alt={alt}
              />{" "}
              {title}
            </p>
          </div>
          <div className="p-4 space-y-4  rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
            {children}
          </div>
        </div>
      </div>
    );
  } else if (src2) {
    return (
      <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
        <div className="p-2 flow space-y-3">
          <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
            <p className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
              <img
                className="object-contain relative inline-block w-8 h-8 align-middle mb-1"
                src={src}
                alt={alt}
              />{" "}
              {title}
            </p>
          </div>
          <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
            <div className="p-4 space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
              {Object.keys(infodict).map((i) => (
                <p key={i}>{infodict[i] == "" ? <br /> : infodict[i]}</p>
              ))}
            </div>
          </div>
          <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
            <a href="https://twitter.com/ribbonfemale" target="_blank">
              <span className="relative inline-flex align-middle">
                <Image
                  className="rounded-lg"
                  src={src2}
                  layout="intrinsic"
                  width="2048"
                  height="2048"
                  alt={alt2}
                />
              </span>
            </a>
          </div>
        </div>
      </div>
    );
  } else if (url) {
    return (
      <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
        <div className="p-2 flow space-y-3" id={title}>
          <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
            <p className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
              <img
                className="object-contain relative inline-block w-8 h-8 align-middle mb-1"
                src={src}
                alt={alt}
              />{" "}
              {title}
            </p>
          </div>
          <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
            <div className="p-4 space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
              {Object.keys(infodict).map((i) => (
                <p className="overflow-auto" key={i}>
                  {infodict[i] == "" ? <br /> : infodict[i]}
                </p>
              ))}
            </div>
            <div className="pb-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
              <Link href={url}>
                <a
                  target="_blank"
                  className=" transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
                >
                  Learn More
                </a>
              </Link>
            </div>
          </div>
        </div>
      </div>
    );
  } else {
    return (
      <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
        <div className="p-2 flow space-y-3">
          <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
            <h4 className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
              <img
                className="relative inline-block w-8 h-8 align-middle mb-1"
                src={src}
                alt={alt}
              />{" "}
              {title}
            </h4>
          </div>
          <div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
            <div className="p-4 space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
              {Object.keys(infodict).map((i) => (
                <p className="overflow-auto" key={i}>
                  {" "}
                  {infodict[i] == "" ? <br /> : infodict[i]}
                </p>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }
}