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

interface WelcomeEmailProps {
  userName?: string;
}

export const WelcomeEmail = ({ userName = 'Kirubel' }: WelcomeEmailProps) => {
  return (
    <EmailLayout
      preview="Welcome to Amba! We're excited to have you join us."
    >
      <Section>
        <Heading style={heading}>
          Hi {userName}! 👋
        </Heading>
        <Text style={text}>
          Welcome to Amba! We're thrilled to have you join our community. Amba makes it easy to manage your payments, send money to friends, and handle all your financial transactions seamlessly.
        </Text>
        <Text style={text}>
          Get started by adding your first payment card or exploring the app to see all the amazing features we have to offer.
        </Text>
        <Section style={buttonSection}>
          <Button href="https://amba.app/get-started">
            Get Started
          </Button>
        </Section>
        <Text style={text}>
          If you have any questions, feel free to reach out to our support team. We're here to help!
        </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 buttonSection = {
  textAlign: 'center' as const,
  margin: '32px 0',
};

WelcomeEmail.PreviewProps = {
  userName: 'Kirubel',
} as WelcomeEmailProps;

export default WelcomeEmail;