<script setup lang="ts">
interface TeamInvitationEmailProps {
  organizationName?: string
  inviterName?: string
  url?: string
  appName?: string
}

withDefaults(defineProps<TeamInvitationEmailProps>(), {
  organizationName: '',
  inviterName: '',
  url: '',
  appName: 'Harmonic SaaS'
})

const main = {
  backgroundColor: '#ffffff',
  fontFamily:
    'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
}

const container = {
  paddingLeft: '16px',
  paddingRight: '16px',
  margin: '0 auto',
  maxWidth: '600px'
}

const contentBox = {
  backgroundColor: '#fafafa',
  borderRadius: '12px',
  padding: '32px',
  marginBottom: '24px',
  border: '1px solid #e5e5e5'
}

const heading = {
  color: '#09090b',
  margin: '0 0 24px 0',
  fontSize: '28px',
  fontWeight: '700',
  letterSpacing: '-0.025em'
}

const text = {
  margin: '0 0 16px 0',
  fontSize: '16px',
  color: '#52525b',
  lineHeight: '1.75'
}

const buttonContainer = {
  textAlign: 'center' as const,
  margin: '32px 0'
}

const button = {
  backgroundColor: '#16a34a',
  color: '#ffffff',
  padding: '12px 24px',
  textDecoration: 'none',
  borderRadius: '8px',
  fontWeight: '600',
  display: 'inline-block',
  fontSize: '15px'
}

const linkText = {
  margin: '24px 0 0 0',
  fontSize: '14px',
  color: '#71717a'
}

const urlText = {
  margin: '12px 0 0 0',
  fontSize: '13px',
  color: '#16a34a',
  wordBreak: 'break-all' as const,
  fontFamily: 'ui-monospace, monospace'
}

const warningText = {
  margin: '24px 0 0 0',
  fontSize: '14px',
  color: '#71717a'
}

const footer = {
  fontSize: '13px',
  color: '#a1a1aa',
  textAlign: 'center' as const,
  margin: '24px 0 0 0'
}
</script>

<template>
  <EHtml>
    <EHead />
    <EPreview>You've been invited to join {{ organizationName }} on {{ appName }}</EPreview>
    <EBody :style="main">
      <EContainer :style="container">
        <ESection :style="contentBox">
          <EHeading :style="heading">
            You've Been Invited!
          </EHeading>
          <EText :style="text">
            <strong>{{ inviterName }}</strong> has invited you to join <strong>{{ organizationName }}</strong> on {{ appName }}.
          </EText>
          <ESection :style="buttonContainer">
            <EButton
              :href="url"
              :style="button"
            >
              Accept Invitation
            </EButton>
          </ESection>
          <EText :style="linkText">
            Or copy and paste this link into your browser:
          </EText>
          <EText :style="urlText">
            {{ url }}
          </EText>
          <EText :style="warningText">
            This invitation will expire in 7 days.
          </EText>
        </ESection>
        <EText :style="footer">
          If you don't want to accept this invitation, you can ignore this email.
        </EText>
      </EContainer>
    </EBody>
  </EHtml>
</template>
