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

const Label = ({
  title,
  amount,
  currencyCode,
  size
}: {
  title: string;
  amount: string;
  currencyCode: string;
  size?: string;
}) => {
  return (
    <div className={clsx('@container/label')}>
      <div className="flex flex-col space-y-2">
        <h3 className="mr-4 line-clamp-2 flex-grow font-serif text-3xl md:text-4xl">{title}</h3>
        <div className="font-multilingual flex flex-row items-center space-x-2">
          <Price
            className="flex-none"
            amount={amount}
            currencyCode={currencyCode}
            currencyCodeClassName="hidden @[275px]/label:inline"
          />
          {!!size && (
            <>
              <div>/</div>
              <div>{size}</div>
            </>
          )}
        </div>
      </div>
    </div>
  );
};

export default Label;