import ProBadge from '../../../../../components/ProBadge';
import cn from '../../../../../utils/cn';
import isProActive from '../../../../../utils/isProActive';
import PlaceholderContent from './PlaceholderContent';

const PlaceHolderTip = ({ className, showProBadge = false }) => {
  const isPro = isProActive();

  return (
    <div
      className={cn(
        'wmx-relative wmx-bg-white wmx-w-full wmx-py-3 wmx-px-4 wmx-border wmx-border-gray-300 wmx-rounded-lg',
        className
      )}
    >
      <PlaceholderContent />

      <p className={cn('wmx-text-sm  wmx-leading-7 wmx-mt-4')}>
        <span className='wmx-font-bold'>Example:</span> If you write{' '}
        <span className='wmx-font-semibold'>“{`{{discount_percentage}}`} Off”</span>, it will appear as{' '}
        <span className='wmx-font-semibold'>“50% Off”</span> on your product.
      </p>

      {!isPro && showProBadge && <ProBadge />}
    </div>
  );
};
export default PlaceHolderTip;
