function LinkIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" aria-hidden="true">
      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" strokeLinecap="round" />
      <polyline points="15 3 21 3 21 9" strokeLinecap="round" />
      <line x1="10" y1="14" x2="21" y2="3" strokeLinecap="round" />
    </svg>
  );
}

function CheckIcon() {
  return (
    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" aria-hidden="true">
      <path d="m5 13 4 4 10-10" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export default function CompleteStep({ strings: S, docsUrl, supportUrl, tutorialsUrl }) {
  const links = [
    { label: S.docs, url: docsUrl },
    { label: S.support, url: supportUrl },
    { label: S.tutorials, url: tutorialsUrl },
  ].filter((l) => l.url);

  return (
    <div className="wowext-onboarding-complete">
      <div className="wowext-onboarding-complete__icon" aria-hidden="true">
        <CheckIcon />
      </div>
      <h1 className="wowext-onboarding-complete__title">{S.completeTitle}</h1>
      <p className="wowext-onboarding-complete__subtitle">{S.completeSubtitle}</p>

      {links.length > 0 && (
        <div className="wowext-onboarding-complete__links">
          <h2 className="wowext-onboarding-complete__links-heading">{S.helpfulLinks}</h2>
          <ul className="wowext-onboarding-link-list">
            {links.map((link) => (
              <li key={link.label}>
                <a href={link.url} target="_blank" rel="noopener noreferrer" className="wowext-onboarding-link">
                  <LinkIcon />
                  <span>{link.label}</span>
                </a>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}
