import { Heading, Section, Text } from '@react-email/components';
import { EmailLayout } from './components/EmailLayout';
import { Button } from './components/Button';
import { StatusBanner } from './components/StatusBanner';
import { styles } from './components/styles';
import { tCommon } from './i18n/common';
import { tTemplate } from './i18n/templates';
import { resolveLocale, type Locale } from './i18n/types';
import { interpolate } from './utils/interpolate';
import { theme } from './theme';

export interface PromotionalEmailProps {
  locale?: Locale;
  headline?: string;
  body?: string;
  cta?: string;
  ctaUrl?: string;
}

export const PromotionalEmail = ({
  locale,
  headline = 'Seasonal wellness essentials',
  body = 'Restock vitamins and cold-care products with free delivery on orders over ETB 1,000 this week.',
  cta = 'Shop the promotion',
  ctaUrl = `${theme.brand.website}/shop`,
}: PromotionalEmailProps) => {
  const l = resolveLocale(locale);
  const t = tTemplate('promotional', l);
  const common = tCommon(l);
  const amHeadline = l === 'am' ? 'የወቅቱ የጤና እቃዎች' : headline;
  const amBody = l === 'am' ? 'በዚህ ሳምንት ከETB 1,000 በላይ ትዕዛዞች ነፃ ማድረስ ጋር ቫይታሚኖችን እና የቅዝቃዜ እንክብካቤ ምርቶችን እንደገና ያስቀምጡ።' : body;
  const amCta = l === 'am' ? 'ማስተዋወቂያውን ይግዙ' : cta;
  return (
    <EmailLayout preview={interpolate(t.preview, { headline: amHeadline })} locale={l}>
      <StatusBanner tone="brand">{t.banner}</StatusBanner>
      <Heading style={styles.heading}>{interpolate(t.heading, { headline: amHeadline })}</Heading>
      <Text style={styles.text}>{interpolate(t.body1, { body: amBody })}</Text>
      <Section style={styles.buttonSection}>
        <Button href={ctaUrl}>{interpolate(t.cta, { cta: amCta })}</Button>
      </Section>
      <Text style={styles.muted}>{common.regards}<br />{common.team}</Text>
    </EmailLayout>
  );
};

PromotionalEmail.PreviewProps = { locale: 'en' } as PromotionalEmailProps;
export default PromotionalEmail;