export interface HighlightItemProps {
  text: string;
  imageUrl?: string;
  imageHeight?: number;
  imageWidth?: number;
  imageTopOffset?: number;
  maxWidth?: number;
  heading?: string;
  subhead?: string;
}

export const HighlightItem = ({
  text,
  imageUrl,
  imageHeight = 32,
  imageWidth,
  imageTopOffset = 10,
  maxWidth,
}: HighlightItemProps) => (
  <div className='group relative flex h-[120px] flex-col justify-end rounded-[13.129px] border-[0.328px] border-white/5 bg-white/10 px-[5px] py-[10px] backdrop-blur-[16.41px] hover:cursor-pointer'>
    <div
      className='absolute left-1/2 flex -translate-x-1/2 items-center justify-center'
      style={{ bottom: `calc(0% + ${imageTopOffset}px)` }}
    >
      {imageUrl && (
        <img
          src={imageUrl}
          alt=''
          loading='lazy'
          style={{
            height: `${imageHeight}px`,
            width: imageWidth ? `${imageWidth}px` : 'auto',
          }}
          className='object-contain transition-transform duration-200 group-hover:scale-110'
        />
      )}
    </div>
    <span
      style={{ maxWidth: maxWidth ? `${maxWidth}px` : 'auto' }}
      className={`text-center text-[13px] leading-normal font-normal text-white ${
        maxWidth ? 'mx-auto' : ''
      }`}
    >
      {text}
    </span>
  </div>
);