Amba-Emails/emails/referral-success.tsx

import {
  Heading,
  Section,
  Text,
} from '@react-email/components';
import { EmailLayout } from './components/EmailLayout';
import { Card } from './components/Card';
import { Button } from './components/Button';
import { theme } from './theme';

interface ReferralSuccessEmailProps {
  userName?: string;
  referredUserName?: string;
  referralCode?: string;
  rewardAmount?: string;
  transactionAmount?: string;
}

export const ReferralSuccessEmail = ({
  userName = 'Kirubel',
  referredUserName = 'Alex Martinez',
  referralCode = 'AMB-KIRU-2024',
  rewardAmount = '$10.00',
  transactionAmount = '$100.00',
}: ReferralSuccessEmailProps) => {
  return (
    <EmailLayout
      preview={`Great news! Someone used your referral code and you earned ${rewardAmount}!`}
    >
      <Section>
        <Heading style={heading}>
          Referral Reward Earned! 🎉
        </Heading>
        <Text style={text}>
          Hi {userName},
        </Text>
        <Text style={text}>
          Excellent news! <strong>{referredUserName}</strong> has used your referral code <strong>{referralCode}</strong> to make a payment, and you've earned a reward!
        </Text>
        <Card>
          <Section style={rewardSection}>
            <Text style={rewardLabel}>Your Reward</Text>
            <Text style={rewardAmount}>{rewardAmount}</Text>
            <Text style={rewardNote}>
              This reward has been automatically added to your account.
            </Text>
          </Section>
          <Section style={detailRow}>
            <Text style={detailLabel}>Referred By:</Text>
            <Text style={detailValue}>{userName}</Text>
          </Section>
          <Section style={detailRow}>
            <Text style={detailLabel}>New User:</Text>
            <Text style={detailValue}>{referredUserName}</Text>
          </Section>
          <Section style={detailRow}>
            <Text style={detailLabel}>Referral Code Used:</Text>
            <Text style={detailValue}>{referralCode}</Text>
          </Section>
          <Section style={detailRow}>
            <Text style={detailLabel}>Transaction Amount:</Text>
            <Text style={detailValue}>{transactionAmount}</Text>
          </Section>
        </Card>
        <Text style={text}>
          Keep sharing your referral code with friends and family to earn more rewards! Every successful referral earns you {rewardAmount}.
        </Text>
        <Section style={buttonSection}>
          <Button href="https://amba.app/referrals">
            View Referral Dashboard
          </Button>
        </Section>
        <Text style={text}>
          Thank you for helping grow the Amba community!
        </Text>
        <Text style={text}>
          Best regards,<br />
          The Amba Team
        </Text>
      </Section>
    </EmailLayout>
  );
};

const heading = {
  color: theme.colors.primary,
  fontSize: '28px',
  fontWeight: '700',
  margin: '0 0 24px',
};

const text = {
  color: theme.colors.textDark,
  fontSize: '16px',
  lineHeight: '24px',
  margin: '0 0 16px',
};

const rewardSection = {
  textAlign: 'center' as const,
  padding: '20px 0',
  marginBottom: '20px',
  borderBottom: `2px solid ${theme.colors.accent}`,
};

const rewardLabel = {
  color: theme.colors.text,
  fontSize: '14px',
  fontWeight: '600',
  margin: '0 0 8px',
  textTransform: 'uppercase' as const,
  letterSpacing: '1px',
};

const rewardAmount = {
  color: theme.colors.primary,
  fontSize: '36px',
  fontWeight: '700',
  margin: '0 0 8px',
};

const rewardNote = {
  color: theme.colors.text,
  fontSize: '12px',
  margin: '0',
  fontStyle: 'italic',
};

const detailRow = {
  display: 'flex',
  justifyContent: 'space-between',
  marginBottom: '12px',
  paddingBottom: '12px',
  borderBottom: `1px solid ${theme.colors.border}`,
};

const detailLabel = {
  color: theme.colors.text,
  fontSize: '14px',
  fontWeight: '600',
  margin: '0',
  flex: '1',
};

const detailValue = {
  color: theme.colors.textDark,
  fontSize: '14px',
  margin: '0',
  textAlign: 'right' as const,
  flex: '1',
};

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

ReferralSuccessEmail.PreviewProps = {
  userName: 'Kirubel',
  referredUserName: 'Alex Martinez',
  referralCode: 'AMB-KIRU-2024',
  rewardAmount: '$10.00',
  transactionAmount: '$100.00',
} as ReferralSuccessEmailProps;

export default ReferralSuccessEmail;