/* eslint-disable @next/next/no-img-element */
import { useMediaQueries } from "@/hooks/useMediaQueries";
import clsx from "clsx";
import { motion } from "framer-motion";
import Link from "next/link";

export interface IProduct {
  id: number;
  title: string;
  text: string;
  image: string;
}

export function ProductItem({
  image,
  title,
  text,
  className,
  href,
}: IProduct & { className?: string; href: string }) {
  const { isLg, isMd } = useMediaQueries();

  return (
    <Link
      href={href}
      className={clsx(
        `md:p-5 p-2 flex flex-col overflow-hidden justify-between box-border relative max-md:items-start bg-[#37393B99] hover:border-white/8 border-transparent border transition-colors bg-[radial-gradient(farthest-corner_at_top_left,transparent,transparent)] lg:hover:bg-[radial-gradient(farthest-corner_at_top_left,transparent,#7A7A7A50)] lg:rounded-[1.111vw] rounded-2xl`,
        className
      )}
    >
      <div className="max-md:hidden space-y-2">
        {/* <div className="heading1 flex items-start font-medium">
          {(isLg || isMd) && title === "Stream" && (
            <div className="rounded-full bg-[#B5F54E] bg-opacity-30 p-0.5">
              <div className="rounded-full bg-[#B5F54E] w-[5px] h-[5px]" />
            </div>
          )}
          {title}
        </div> */}
        <div className="heading2 font-medium opacity-60 lg:max-w-[50%]">
          {text}
        </div>
      </div>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        className="md:hidden min-w-16 min-h-16 relative content-center"
      >
        <img
          src={image}
          alt={text}
          className="rounded-lg !relative"
          width={64}
          height={64}
        />
      </motion.div>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        className="max-md:hidden lg:hidden absolute right-0 bottom-0"
      >
        <div className="relative">
          <img
            src={image}
            className="rounded-lg !relative max-w-[29.167vw]"
            sizes="29.167vw"
            alt={text}
          />
        </div>
      </motion.div>
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        className="max-lg:hidden absolute bottom-0 -right-10"
      >
        <div className="relative">
          <img
            src={image}
            alt={text}
            className="rounded-lg !relative max-w-[21.667vw]"
            sizes="21.667vw"
          />
        </div>
      </motion.div>
      <div className="btns md:hidden font-medium opacity-60">{text}</div>
    </Link>
  );
}