commerce/components/grid/tile.tsx

import clsx from 'clsx';
import Image from 'next/image';
import LabelOverlay from '../labelOverlay';

export function GridTileImage({
  isInteractive = true,
  active,
  label,
  sparkles,
  available,
  ...props
}: {
  isInteractive?: boolean;
  active?: boolean;
  label?: {
    title: string;
    amount: string;
    currencyCode: string;
    position?: 'bottom' | 'center';
  };
  sparkles?: boolean;
  available?: boolean;
} & React.ComponentProps<typeof Image>) {
  return (
    <div
      className={clsx(
        'group flex h-full w-full items-center justify-center overflow-visible rounded-lg dark:bg-black',
        {
          relative: label,
          '': active,
          '': !active
        }
      )}
    >
      {sparkles && (
        <Image
          className={clsx(
            'absolute z-0 h-full w-full opacity-0 transition duration-300 ease-in-out group-hover:opacity-100'
          )}
          src={'/okay_frame.svg'}
          width={420}
          height={420}
          alt={'branded frame'}
        />
      )}
      {props.src ? (
        // eslint-disable-next-line jsx-a11y/alt-text -- `alt` is inherited from `props`, which is being enforced with TypeScript
        <Image
          className={clsx(
            'relative z-10 h-full w-full object-contain',
            {
              'transition duration-300 ease-in-out group-hover:opacity-40': isInteractive
            },
            { '': !available }
          )}
          {...props}
        />
      ) : null}
      {label ? (
        <div className={clsx('opacity-0 transition group-hover:opacity-100')}>
          <LabelOverlay
            title={label.title}
            amount={label.amount}
            currencyCode={label.currencyCode}
            position={label.position}
            available={available}
          />
        </div>
      ) : null}
    </div>
  );
}