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

export const ChipSharp = ({ image, text }: { image: string; text: string }) => {
  return (
    <div className="bg-gray-200/25 p-2 w-[310px] relative h-[100px] overflow-hidden flex items-center">
      <p className="text-center ml-2 max-w-[150px] whitespace-normal break-words line-clamp-2">
        {text}
      </p>
      <div className="relative w-[120px] h-[120px] overflow-hidden ml-2">
        <Image
          src={image}
          alt=""
          fill
          style={{ objectFit: "cover" }}
          className=""
          sizes="120px"
        />
        {/* Overlay */}
        <div className="absolute inset-0 bg-gray-200/25"></div>
      </div>
    </div>
  );
};