import type { StoreProduct } from '~/src/lib/pageMetadata/types';
import type { FC } from 'react';

import Text from '~/src/components/Text';
import { toCurrencySymbol } from '~/src/lib/utils/currency';

export const MerchText: FC<
  Pick<StoreProduct, 'name' | 'price' | 'priceCurrency'>
> = ({ name, price, priceCurrency }) => {
  return (
    <>
      <Text withEllipsis title={name}>
        {/* long text causes odd rendering overflow bug in horizontal scroller */}
        {name.slice(0, 32)}
      </Text>
      <Text weight="medium" margin="0.3rem 0 0">
        {toCurrencySymbol(priceCurrency as any)}
        {price?.toFixed(2)}
      </Text>
    </>
  );
};