import { __ } from '@wordpress/i18n';
import SectionContainer from '../../../../../../../components/SectionContainer';
import { CUSTOM_BADGE_TEMPLATES } from '../../../../../../../utils/customBadge';
import TemplateItem from './components/TemplateItem';

const CustomBadgeTemplates = () => {
  return (
    <SectionContainer className='wmx-mt-6' title={__('Badge Templates')}>
      <div className='wmx-p-4 wmx-flex wmx-text-center wmx-flex-wrap wmx-max-h-64 wmx-overflow-x-auto wmx-justify-center wmx-gap-3 wmx-custom-scrollbar'>
        {CUSTOM_BADGE_TEMPLATES.map((template, idx) => (
          <TemplateItem key={idx} template={template} />
        ))}
      </div>
    </SectionContainer>
  );
};
export default CustomBadgeTemplates;
