import React from 'react';
import cn from '../../../../../utils/cn';
import { BADGE_CONTENT_PLACEHOLDERS, handleCopy } from '../../../../../utils/utils';

const PlaceholderContent = () => {
  return (
    <p className={cn('wmx-text-sm  wmx-leading-7')}>
      <span className='wmx-font-bold'>Tip: </span>Use placeholders like{' '}
      {BADGE_CONTENT_PLACEHOLDERS.map((placeholder, index) => (
        <React.Fragment key={placeholder}>
          <code title='Click To Copy!' className='wmx-cursor-pointer' onClick={() => handleCopy(placeholder)}>
            {placeholder}
          </code>
          {index === BADGE_CONTENT_PLACEHOLDERS.length - 2 ? ' and ' : ', '}
        </React.Fragment>
      ))}
      to show discount and price details.
    </p>
  );
};
export default PlaceholderContent;
