import React from "react";
import Image from "next/image";

export const Chip = ({ image, text }: { image: string; text: string }) => {
  return (
    <div className="rounded-2xl bg-gray-300/25 p-2 w-min relative h-[82px] overflow-hidden flex items-center">
      <div className="relative w-[80px] h-[80px] overflow-hidden">
        {/* Performance: Added sizes for fixed-width image optimization */}
        <Image
          src={image}
          alt=""
          fill
          style={{ objectFit: "cover" }}
          className=""
          sizes="80px"
        />
        {/* Overlay */}
        <div className="absolute inset-0 bg-gray-300/25"></div>
      </div>
      <p className="text-center ml-4">{text}</p>
    </div>
  );
};