commerce/components/label.tsx

import clsx from 'clsx';
import Price from './price';

const Label = ({
  title,
  amount,
  currencyCode,
  position,
  size
}: {
  title: string;
  amount: string;
  currencyCode: string;
  position?: 'bottom' | 'center';
  size?: 'large' | 'small';
}) => {
  return (
    <div
      className={clsx(
        'absolute bottom-0 left-0 flex items-center rounded-full border bg-white/80 p-1 text-black backdrop-blur-md dark:border-gray-800 dark:bg-black/80 dark:text-white',
        size === 'large' ? 'text-sm' : 'text-xs',
        position === 'center'
          ? 'mb-4 ml-4 md:mb-8 md:ml-8 lg:mb-[35%] lg:ml-20'
          : size === 'large'
          ? 'mb-4 ml-4 md:mb-8 md:ml-8'
          : 'mb-4 ml-4'
      )}
    >
      <h3 data-testid="product-name" className="mr-6 inline pl-2 font-semibold">
        {title}
      </h3>
      <Price
        className="flex-none rounded-full bg-blue-600 p-2 font-semibold text-white"
        amount={amount}
        currencyCode={currencyCode}
      />
    </div>
  );
};

export default Label;