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

export default function projectCard({ title, url, src, alt, description }) {
  return (
    <li className="p2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-light dark:bg-werefox-grey">
      <div className="p-2 flow space-y-2 w-full">
        <div className="p-3 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
          <div className="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">
                <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}
              </a>
            </Link>
          </div>
        </div>
        <div className="p-3 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
          <p className="text-md text-center text-werefox-blue-dark dark:text-werefox-blue">
            {description}
          </p>
        </div>
      </div>
    </li>
  );
}