import React from "react";
import styled from "styled-components";
import Header from "../../components/header/header.component";

const D = styled.div`
  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }

  td,
  th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }

  tr:nth-child(even) {
    background-color: #dddddd;
  }
`;

export default function PartsOrderEmail({ data }) {
  const order = data.parts_orders_by_pk;
  return (
    <D>
      <Header bodyshop={data.bodyshops[0]} />
      <table>
        <tr>
          <td>{`Deliver By: ${order.deliver_by}`}</td>
          <td>{`Ordered By: ${order.user_email}`}</td>
        </tr>
      </table>
      <table>
        <tr>
          <th>Line Description</th>
          <th>Part #</th>
          <th>Price</th>
          <th>Line Remarks</th>
        </tr>
        {order.parts_order_lines.map(item => (
          <tr key={item.id}>
            <td>{item.line_desc}</td>
            <td>{item.oem_partno}</td>
            <td>{item.act_price}</td>
            <td>{item.line_remarks}</td>
          </tr>
        ))}
      </table>
    </D>
  );
}
