.profile/components/Portfolio/PortfolioItem.tsx

import Image from "next/image"

import { ShadowContainer } from "@/components/design/ShadowContainer"

export interface PortfolioItemProps {
  title: string
  description: string
  link: string
  image: string
}

export const PortfolioItem = (props: PortfolioItemProps): JSX.Element => {
  const { title, description, link, image } = props

  return (
    <ShadowContainer className="relative cursor-pointer items-center sm:ml-10">
      <a
        className="group inline-flex justify-center"
        target="_blank"
        rel="noopener noreferrer"
        href={link}
        aria-label={title}
      >
        <div className="flex justify-center">
          <Image
            quality={100}
            className="h-auto w-auto transition-opacity duration-500 group-hover:opacity-20 dark:group-hover:opacity-5"
            width={300}
            height={300}
            src={image}
            alt={title}
          />
        </div>
        <div className="absolute bottom-0 h-auto overflow-hidden text-center opacity-0 transition-opacity duration-500 group-hover:opacity-100">
          <h3 className="my-6 text-xl font-semibold text-yellow dark:text-yellow-dark">
            {title}
          </h3>
          <p className="my-6">{description}</p>
        </div>
      </a>
    </ShadowContainer>
  )
}