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

interface PromotionalEmailProps {
  userName?: string;
  title?: string;
  offerTitle?: string;
  offerDescription?: string;
  ctaText?: string;
  ctaLink?: string;
}

export const PromotionalEmail = ({
  userName = 'Kirubel',
  title = 'Special Offer Just for You! 🎁',
  offerTitle = 'Get 20% Cashback',
  offerDescription = 'Use AmbaPay for your next transaction and receive 20% cashback. Limited time offer!',
  ctaText = 'Claim Offer',
  ctaLink = 'https://amba.app/promo',
}: PromotionalEmailProps) => {
  return (
    <EmailLayout
      preview="Exclusive offer from AmbaPay - Don't miss out!"
    >
      <Section>
        <Heading style={heading}>
          {title}
        </Heading>
        <Text style={text}>
          Hi {userName},
        </Text>
        <Text style={text}>
          We have something special for you! As a valued member of the AmbaPay community, we're excited to share an exclusive offer.
        </Text>
        <Card>
          <Section style={offerSection}>
            <Text style={offerTitleStyle}>{offerTitle}</Text>
            <Text style={offerDescriptionStyle}>{offerDescription}</Text>
          </Section>
        </Card>
        <Section style={buttonSection}>
          <Button href={ctaLink}>
            {ctaText}
          </Button>
        </Section>
        <Text style={text}>
          This offer is valid for a limited time only. Don't miss out on this great opportunity!
        </Text>
        <Text style={text}>
          Terms and conditions apply. See our website for full details.
        </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 offerSection = {
  textAlign: 'center' as const,
  padding: '0',
};

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

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

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

PromotionalEmail.PreviewProps = {
  userName: 'Kirubel',
  title: 'Special Offer Just for You! 🎁',
  offerTitle: 'Get 20% Cashback',
  offerDescription: 'Use AmbaPay for your next transaction and receive 20% cashback. Limited time offer!',
  ctaText: 'Claim Offer',
  ctaLink: 'https://amba.app/promo',
} as PromotionalEmailProps;

export default PromotionalEmail;