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

interface WaitlistEmailProps {
  userName?: string;
  position?: number;
}

export const WaitlistEmail = ({
  userName = 'Kirubel',
  position = 42,
}: WaitlistEmailProps) => {
  return (
    <EmailLayout
      preview="Thank you for joining the AmbaPay waitlist! We're excited to have you on board."
    >
      <Section>
        <Heading style={heading}>
          You're on the List! 🎉
        </Heading>
        <Text style={text}>
          Hi {userName},
        </Text>
        <Text style={text}>
          Thank you for joining the AmbaPay waitlist! We're thrilled to have you as part of our community. You're helping us build the future of seamless payments.
        </Text>
        <Text style={text}>
          <strong>Your position: #{position}</strong>
        </Text>
        <Text style={text}>
          We're working hard to launch AmbaPay and bring you an innovative payment experience. As we get closer to launch, we'll keep you updated on our progress and exclusive early access opportunities.
        </Text>
        <Section style={buttonSection}>
          <Button href="https://amba.app/waitlist">
            Learn More About AmbaPay
          </Button>
        </Section>
        <Text style={text}>
          In the meantime, feel free to follow us on social media for updates, tips, and behind-the-scenes content.
        </Text>
        <Text style={text}>
          We appreciate your patience and can't wait to welcome you to AmbaPay!
        </Text>
        <Text style={text}>
          Best regards,<br />
          The AmbaPay 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 buttonSection = {
  textAlign: 'center' as const,
  margin: '32px 0',
};

WaitlistEmail.PreviewProps = {
  userName: 'Kirubel',
  position: 42,
} as WaitlistEmailProps;

export default WaitlistEmail;