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

export default function projectCard({
  title,
  url,
  new_tab,
  src,
  alt,
  description,
}) {
  const open_new_tab = new_tab ? "_blank" : "";

  return (
    <div>
      <Link href={url}>
        <a target={open_new_tab}>
          <li className="p-4 space-y-2 rounded-sm ring-2 text-werefox-blue-dark dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink 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>
  );
}