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

export default function IdentityCard({
  title,
  info,
  url,
  src,
  alt,
  src2,
  alt2,
}) {
  if (src2) {
    return (
      <div className="p-2 flow space-y-3">
        <div className="rounded-lg ring-2 ring-werefox-grey-lightest 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-center text-werefox-grey-dark dark:text-werefox-grey-lighter">
            <span className="relative inline-block w-8 h-8 align-middle mb-1">
              <Image src={src} layout="fill" objectFit="contain" alt={alt} />
            </span>{" "}
            {title}
          </h4>
        </div>
        <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
          <p className="p-4 text-center text-md sm:text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
            {Object.keys(info).map((i) => (
              <p className="pb-4" key={i}>
                {info[i]}
              </p>
            ))}
          </p>
        </div>
        <div className="rounded-lg ring-2 ring-werefox-grey-lightest 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>
    );
  } else {
    return (
      <div className="p-2 flow space-y-3">
        <div className="rounded-lg ring-2 ring-werefox-grey-lightest 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-center text-werefox-grey-dark dark:text-werefox-grey-lighter">
            <span className="relative inline-block w-8 h-8 align-middle mb-1">
              <Image src={src} layout="fill" objectFit="contain" alt={alt} />
            </span>{" "}
            {title}
          </p>
        </div>
        <div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
          <p className="p-4 text-center text-md sm:text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
            {Object.keys(info).map((i) => (
              <p className="pb-4" key={i}>
                {info[i]}
              </p>
            ))}
          </p>
          <div className="pb-4 text-center text-md sm:text-lg text-center 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>
    );
  }
}