import React from "react";
import styled from "styled-components";
import Header from "../../components/header/header.component";
import { DateTimeFormatter } from "../../../utils/DateFormatter";

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 const Subject = "Appointment Reminder";

export default function AppointmentConfirmationEmail({ data }) {
  const appointment = data.appointments_by_pk;
  console.log("appointment", appointment);
  return (
    <D>
      <Header bodyshop={data.bodyshops[0]} />
      <strong>Appointment Reminder</strong>
      <p> Dear {`${appointment.job.ownr_fn} ${appointment.job.ownr_ln}`},</p>
      <p>
        You have an appointment at {data.bodyshops[0].shopname} on{" "}
        <DateTimeFormatter>{appointment.start}</DateTimeFormatter>.
      </p>
      <p>Thank you from the team at {data.bodyshops[0].shopname}</p>
    </D>
  );
}
