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

export default function projectCard({
  title,
  url,
  new_tab,
  src,
  alt,
  description,
}) {
  if (Boolean(new_tab)) {
    return (
      <div>
        <Link href={url}>
          <a target="_blank">
            <li className="p-4 space-y-2 rounded-sm ring-2 text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue hover:animate-yip transition">
              <div className="text-lg text-center">
                <span className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top">
                  <Image
                    src={src}
                    layout="fill"
                    objectFit="contain"
                    alt={alt}
                  />
                </span>
                {` ${title}`}
              </div>
              <div className="text-md text-center">{description}</div>
            </li>
          </a>
        </Link>
      </div>
    );
  } else {
    return (
      <div>
        <Link href={url}>
          <a>
            <li className="p-4 space-y-2 rounded-sm ring-2 text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue hover:animate-yip transition">
              <div className="text-lg text-center">
                <span className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top">
                  <Image
                    src={src}
                    layout="fill"
                    objectFit="contain"
                    alt={alt}
                  />
                </span>
                {` ${title}`}
              </div>
              <div className="text-md text-center">{description}</div>
            </li>
          </a>
        </Link>
      </div>
    );
  }
}
