import React from 'react';
import { Column, Row, Section, Text } from '@react-email/components';
import { theme } from '../theme';
import { Card } from './Card';

export interface OrderLineItem {
  name: string;
  qty: number;
  price: string;
}

interface OrderSummaryProps {
  orderId: string;
  items: OrderLineItem[];
  total: string;
  orderLabel: string;
  totalLabel: string;
}

export const OrderSummary = ({
  orderId,
  items,
  total,
  orderLabel,
  totalLabel,
}: OrderSummaryProps) => (
  <Card>
    <Text style={label}>
      {orderLabel}: {orderId}
    </Text>
    {items.map((item) => (
      <Row key={`${item.name}-${item.qty}`} style={row}>
        <Column>
          <Text style={itemText}>
            {item.name} × {item.qty}
          </Text>
        </Column>
        <Column align="right">
          <Text style={itemText}>{item.price}</Text>
        </Column>
      </Row>
    ))}
    <Section style={totalRow}>
      <Text style={totalText}>
        {totalLabel}: {total}
      </Text>
    </Section>
  </Card>
);

const label = {
  color: theme.colors.muted,
  fontSize: '13px',
  margin: '0 0 12px',
};

const row = {
  marginBottom: '6px',
};

const itemText = {
  color: theme.colors.forest,
  fontSize: '14px',
  margin: 0,
};

const totalRow = {
  borderTop: `1px solid ${theme.colors.line}`,
  marginTop: '12px',
  paddingTop: '12px',
};

const totalText = {
  color: theme.colors.forest,
  fontSize: '16px',
  fontWeight: 700,
  margin: 0,
};