import React from "react";
import Link from "next/link";

interface GridItemProps {
  title: string;
  description: string;
  link?: string;
  image?: string;
  icon?: string;
  className?: string;
}

const GridItem: React.FC<GridItemProps> = ({
  title,
  description,
  className,
  image,
  link,
  icon,
}) => {
  return (
    <div className="item relative group">
      <Link href={link ? link : "/"}>
        {image && (
          <img
            src={image}
            alt={title}
            loading="lazy"
            decoding="async"
            className="bgresim min-h-[300px] object-cover"
          />
        )}
        <div className={` absolute w-full h-full ${className} top-0 left-0 z-20 px-8 py-10 `}>
          <div>
            <h4 className="text-xl font-semibold mb-2">{title}</h4>
            <p>{description}</p>
          </div>

          {icon && (
            <div className="w-50 h-50">
              <img
                src={icon}
                alt=""
                loading="lazy"
                decoding="async"
                width={40}
                height={50}
                className="z-50 group-hover:left-14 duration-500 absolute bottom-10 left-12 ico-whiten "
              />
            </div>
          )}
        </div>
      </Link>
    </div>
  );
};

export default GridItem;