{% liquid
  assign discount_title = block.settings.discount_title | default: 'Buy More, Save More'
  assign discount_description = block.settings.discount_description | default: 'Buy 4 items and save 10% off your first order'
  assign discount_code = block.settings.discount_code | default: 'BUY4SAVE10'
%}

<div
  class='relative flex items-center justify-between rounded-lg bg-gray-200 px-8 py-5 font-figtree gap-3'
>
  <div class='absolute left-0 top-1/2 size-6 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white'></div>
  <div class='absolute right-0 top-1/2 size-6 -translate-y-1/2 translate-x-1/2 rounded-full bg-white'></div>
  <div>
    <h3 class='text-xl font-semibold text-black'>
      {{ discount_title }}
    </h3>
    {% if discount_description %}
      <p class='font-figtree text-lg font-normal text-gray-500'>
        {{ discount_description }}
      </p>
    {% endif %}
  </div>
  <div
    class='rounded-md border border-dashed border-gray-425 px-2 py-1.5 text-xl text-black'
  >
    {{ discount_code }}
  </div>
</div>