import React, { FC } from 'react'
import { Order } from '../model/models'
import { Text } from '@wordpress/ui'

export declare interface OrderListDetailsProps {
  order: Order
}

const OrderListDetails: FC<OrderListDetailsProps> = ({ order }) => {
  return (
    <div style={{ margin: '0.75rem', minWidth: '300px' }}>
      <div>
        <Text variant="heading-lg">{order.recipientName}</Text>
      </div>
      <div>
        <Text variant="heading-lg">{order.recipientAddressLine}</Text>
      </div>
      <div>
        <Text variant="heading-lg">{`${order.recipientPostalCode} ${order.recipientCity}`}</Text>
      </div>
      <div style={{ marginTop: '1rem' }}>
        {order.items.map((item, index) => (
          <div key={index}>{`${item.quantity}x ${item.name}`}</div>
        ))}
      </div>
    </div>
  )
}

export default OrderListDetails