import { Heading, Section, Text } from '@react-email/components';
import { EmailLayout } from './components/EmailLayout';
import { Button } from './components/Button';
import { StatusBanner } from './components/StatusBanner';
import { OrderSummary, type OrderLineItem } from './components/OrderSummary';
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 OrderOutForDeliveryEmailProps {
  locale?: Locale;
  userName?: string;
  orderId?: string;
  items?: OrderLineItem[];
  total?: string;
  ctaUrl?: string;
  branchName?: string;
  riderName?: string;
  eta?: string;
}

export const OrderOutForDeliveryEmail = ({
  locale,
  userName = 'Abebe Kebede',
  orderId = 'GS-10482',
  items = [
    { name: 'Amoxicillin 500mg', qty: 2, price: 'ETB 240' },
    { name: 'ORS sachets', qty: 5, price: 'ETB 125' },
  ],
  total = 'ETB 365',
  ctaUrl = `${theme.brand.website}/orders/${orderId}`,
  branchName = 'Bole Branch',
  riderName = 'Dawit Lemma',
  eta = '45 min',
}: OrderOutForDeliveryEmailProps) => {
  const l = resolveLocale(locale);
  const t = tTemplate('order-out-for-delivery', l);
  const common = tCommon(l);
  return (
    <EmailLayout preview={interpolate(t.preview, { orderId })} locale={l}>
      <StatusBanner tone="brand">{interpolate(t.banner, { eta })}</StatusBanner>
      <Heading style={styles.heading}>{t.heading}</Heading>
      <Text style={styles.text}>{interpolate(t.body1, { userName, branchName, riderName, orderId })}</Text>
      <OrderSummary
        orderId={orderId}
        items={items}
        total={total}
        orderLabel={t.orderLabel}
        totalLabel={t.totalLabel}
      />
      <Section style={styles.buttonSection}>
        <Button href={ctaUrl}>{t.cta}</Button>
      </Section>
      <Text style={styles.muted}>{common.regards}<br />{common.team}</Text>
    </EmailLayout>
  );
};

OrderOutForDeliveryEmail.PreviewProps = { locale: 'en' } as OrderOutForDeliveryEmailProps;
export default OrderOutForDeliveryEmail;