Amba-Emails/emails/event-ticket.tsx

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

interface EventTicketEmailProps {
  userName?: string;
  eventName?: string;
  eventDate?: string;
  eventTime?: string;
  venue?: string;
  ticketType?: string;
  amount?: string;
  qrCodeUrl?: string;
  ticketNumber?: string;
}

export const EventTicketEmail = ({
  userName = 'Kirubel',
  eventName = 'Summer Music Festival 2024',
  eventDate = 'July 15, 2024',
  eventTime = '7:00 PM',
  venue = 'City Park Amphitheater',
  ticketType = 'General Admission',
  amount = '$75.00',
  qrCodeUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=EVENT-TICKET-12345',
  ticketNumber = 'EVT-12345',
}: EventTicketEmailProps) => {
  return (
    <EmailLayout
      preview={`Your ${eventName} ticket is ready!`}
    >
      <Section>
        <Heading style={heading}>
          Your Event Ticket is Ready! 🎫
        </Heading>
        <Text style={text}>
          Hi {userName},
        </Text>
        <Text style={text}>
          Thank you for your purchase! Your ticket for <strong>{eventName}</strong> has been confirmed. Please find your ticket details below.
        </Text>
        <Card>
          <Section style={ticketInfo}>
            <Text style={eventTitle}>{eventName}</Text>
            <Section style={detailRow}>
              <Text style={detailLabel}>Date:</Text>
              <Text style={detailValue}>{eventDate}</Text>
            </Section>
            <Section style={detailRow}>
              <Text style={detailLabel}>Time:</Text>
              <Text style={detailValue}>{eventTime}</Text>
            </Section>
            <Section style={detailRow}>
              <Text style={detailLabel}>Venue:</Text>
              <Text style={detailValue}>{venue}</Text>
            </Section>
            <Section style={detailRow}>
              <Text style={detailLabel}>Ticket Type:</Text>
              <Text style={detailValue}>{ticketType}</Text>
            </Section>
            <Section style={detailRow}>
              <Text style={detailLabel}>Ticket Number:</Text>
              <Text style={detailValue}>{ticketNumber}</Text>
            </Section>
            <Section style={detailRow}>
              <Text style={detailLabel}>Amount Paid:</Text>
              <Text style={detailValue}>{amount}</Text>
            </Section>
          </Section>
        </Card>
        <Section style={qrSection}>
          <Text style={qrTitle}>Your QR Code Ticket</Text>
          <Text style={qrInstructions}>
            Present this QR code at the venue entrance for quick access:
          </Text>
          <Section style={qrCodeContainer}>
            <Img
              src={qrCodeUrl}
              width="200"
              height="200"
              alt="QR Code"
              style={qrCode}
            />
          </Section>
          <Text style={qrNote}>
            Save this email or take a screenshot for easy access at the event.
          </Text>
        </Section>
        <Section style={buttonSection}>
          <Button href="https://amba.app/tickets">
            View in App
          </Button>
        </Section>
        <Text style={text}>
          We're excited to see you at the event!
        </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 ticketInfo = {
  padding: '0',
};

const eventTitle = {
  color: theme.colors.primary,
  fontSize: '20px',
  fontWeight: '700',
  margin: '0 0 20px',
  textAlign: 'center' as const,
};

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 qrSection = {
  textAlign: 'center' as const,
  margin: '32px 0',
  padding: '24px',
  backgroundColor: theme.colors.background,
  borderRadius: '8px',
  border: `2px solid ${theme.colors.accent}`,
};

const qrTitle = {
  color: theme.colors.primary,
  fontSize: '18px',
  fontWeight: '600',
  margin: '0 0 8px',
};

const qrInstructions = {
  color: theme.colors.textDark,
  fontSize: '14px',
  margin: '0 0 16px',
};

const qrCodeContainer = {
  textAlign: 'center' as const,
  margin: '16px 0',
};

const qrCode = {
  margin: '0 auto',
  border: `2px solid ${theme.colors.border}`,
  borderRadius: '8px',
  padding: '8px',
  backgroundColor: theme.colors.background,
};

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

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

EventTicketEmail.PreviewProps = {
  userName: 'Kirubel',
  eventName: 'Summer Music Festival 2024',
  eventDate: 'July 15, 2024',
  eventTime: '7:00 PM',
  venue: 'City Park Amphitheater',
  ticketType: 'General Admission',
  amount: '$75.00',
  qrCodeUrl: 'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=EVENT-TICKET-12345',
  ticketNumber: 'EVT-12345',
} as EventTicketEmailProps;

export default EventTicketEmail;