<script lang="ts">
  export let email: string | null | undefined;
  export let size: "sm" | "md" | "lg" = "sm";

  function handleEmailClick(event: MouseEvent) {
    event.stopPropagation();
  }
</script>

{#if email}
  <a
    href="mailto:{email}"
    class="email-link size-{size}"
    on:click={handleEmailClick}
    title="Send email to {email}"
  >
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      width="13"
      height="13"
    >
      <path
        d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
      />
      <polyline points="22,6 12,13 2,6" />
    </svg>
    <span>{email}</span>
  </a>
{/if}

<style>
  .email-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--email-link-color, var(--accent-color, #0066cc));
    text-decoration: none;
    font-size: 0.78rem;
    line-height: 1.35;
    transition: color 0.2s ease;
  }

  .email-link.size-md {
    font-size: 0.82rem;
  }

  .email-link.size-lg {
    font-size: 0.9rem;
  }

  .email-link:hover {
    color: var(--email-link-hover-color, var(--accent-color-hover, #0055aa));
    text-decoration: underline;
  }

  .email-link svg {
    flex-shrink: 0;
    margin-top: -1px;
  }
</style>
