import {
  Body,
  Container,
  Head,
  Heading,
  Hr,
  Html,
  Preview,
  Section,
  Text,
} from "@react-email/components";

import { fontStack } from "./_styles";

type DutyReminderEmailProps = {
  familyName: string;
  dutyName: string;
  weekLabel: string;
};

export function DutyReminderEmail({
  familyName,
  dutyName,
  weekLabel,
}: DutyReminderEmailProps) {
  return (
    <Html lang="de">
      <Head />
      <Preview>
        Erinnerung: {familyName} ist diese Woche für {dutyName} eingeteilt.
      </Preview>
      <Body style={styles.body}>
        <Container style={styles.container}>
          <Section style={styles.header}>
            <Text style={styles.kicker}>Elterndienst</Text>
            <Heading style={styles.heading}>Danke für eure Hilfe</Heading>
            <Text style={styles.lead}>
              Hallo {familyName}, diese Woche seid ihr für den Dienst{" "}
              <strong>{dutyName}</strong> eingeteilt.
            </Text>
          </Section>

          <Section style={styles.card}>
            <Text style={styles.text}>
              Zeitraum: <strong>{weekLabel}</strong>
            </Text>
            <Text style={styles.text}>
              Danke, dass ihr mithelft, den Kita-Alltag verlässlich zu
              organisieren.
            </Text>
          </Section>

          <Hr style={styles.hr} />
          <Text style={styles.footer}>
            Diese Erinnerung wurde automatisch vom Kita-Planer versendet.
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

const styles = {
  body: {
    margin: 0,
    backgroundColor: "#f7f5ef",
    fontFamily: fontStack,
    color: "#24231f",
  },
  container: {
    width: "100%",
    maxWidth: "600px",
    margin: "0 auto",
    padding: "32px 20px",
    fontFamily: fontStack,
  },
  header: {
    padding: "28px",
    backgroundColor: "#27423a",
    borderRadius: "8px 8px 0 0",
    fontFamily: fontStack,
  },
  kicker: {
    margin: "0 0 20px",
    color: "#d9e9c3",
    fontSize: "12px",
    fontWeight: 800,
    letterSpacing: "0.08em",
    textTransform: "uppercase" as const,
    fontFamily: fontStack,
  },
  heading: {
    margin: "0 0 12px",
    color: "#ffffff",
    fontSize: "30px",
    lineHeight: "1.18",
    fontWeight: 800,
    fontFamily: fontStack,
  },
  lead: {
    margin: 0,
    color: "#eef4eb",
    fontSize: "16px",
    lineHeight: "1.55",
    fontFamily: fontStack,
  },
  card: {
    padding: "28px",
    backgroundColor: "#ffffff",
    border: "1px solid #dde3d7",
    borderTop: "0",
    borderRadius: "0 0 8px 8px",
    fontFamily: fontStack,
  },
  text: {
    margin: "0 0 16px",
    color: "#3d423b",
    fontSize: "16px",
    lineHeight: "1.65",
    fontFamily: fontStack,
  },
  hr: {
    margin: "24px 0",
    borderColor: "#dde3d7",
  },
  footer: {
    margin: 0,
    color: "#7b8279",
    fontSize: "12px",
    lineHeight: "1.5",
    textAlign: "center" as const,
    fontFamily: fontStack,
  },
};
