export const createThanksStep = () => {
  const thanksStep = document.createElement('div');
  thanksStep.id = 'thanks-step';

  const icon = document.createElement('div');
  icon.classList.add('check-icon');
  icon.innerHTML = `<svg width="57" height="56" viewBox="0 0 57 56" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="4.5" y="4" width="48" height="48" rx="24" fill="#D1FADF"/>
  <path d="M38.5 27.0799V27.9999C38.4988 30.1563 37.8005 32.2545 36.5093 33.9817C35.2182 35.7088 33.4033 36.9723 31.3354 37.5838C29.2674 38.1952 27.0573 38.1218 25.0345 37.3744C23.0117 36.6271 21.2847 35.246 20.111 33.4369C18.9373 31.6279 18.3798 29.4879 18.5217 27.3362C18.6636 25.1844 19.4972 23.1362 20.8983 21.4969C22.2994 19.8577 24.1928 18.7152 26.2962 18.24C28.3996 17.7648 30.6003 17.9822 32.57 18.8599M38.5 19.9999L28.5 30.0099L25.5 27.0099" stroke="#039855" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  <rect x="4.5" y="4" width="48" height="48" rx="24" stroke="#ECFDF3" stroke-width="8"/>
  </svg>
  `;

  const text = document.createElement('div');
  text.classList.add('thanks-text');
  text.textContent = 'Thank you';

  thanksStep.appendChild(icon);
  thanksStep.appendChild(text);

  return thanksStep;
};