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

import { fontStack } from "./_styles";

type NewsEmailProps = {
  title: string;
  content: string;
  dashboardUrl: string;
};

export function NewsEmail({ title, content, dashboardUrl }: NewsEmailProps) {
  const excerpt =
    content.length > 420 ? `${content.slice(0, 420).trim()}...` : content;

  return (
    <Html lang="de">
      <Head />
      <Preview>Neue Kita-Ankündigung: {title}</Preview>
      <Body style={styles.body}>
        <Container style={styles.container}>
          <Section style={styles.header}>
            <Text style={styles.kicker}>Schwarzes Brett</Text>
            <Heading style={styles.heading}>{title}</Heading>
          </Section>

          <Section style={styles.card}>
            <Text style={styles.text}>{excerpt}</Text>
            <Button href={dashboardUrl} style={styles.button}>
              Im Kita-Planer lesen
            </Button>
          </Section>

          <Hr style={styles.hr} />
          <Text style={styles.footer}>
            Diese offizielle Ankündigung wurde über den Kita-Planer versendet.
          </Text>
        </Container>
      </Body>
    </Html>
  );
}

const styles = {
  body: {
    margin: 0,
    backgroundColor: "#f5f3ee",
    fontFamily: fontStack,
    color: "#25231f",
  },
  container: {
    width: "100%",
    maxWidth: "600px",
    margin: "0 auto",
    padding: "32px 20px",
    fontFamily: fontStack,
  },
  header: {
    padding: "28px",
    backgroundColor: "#243b36",
    borderRadius: "8px 8px 0 0",
    fontFamily: fontStack,
  },
  kicker: {
    margin: "0 0 20px",
    color: "#d8f2bd",
    fontSize: "12px",
    fontWeight: 800,
    letterSpacing: "0.08em",
    textTransform: "uppercase" as const,
    fontFamily: fontStack,
  },
  heading: {
    margin: 0,
    color: "#ffffff",
    fontSize: "28px",
    lineHeight: "1.2",
    fontWeight: 800,
    fontFamily: fontStack,
  },
  card: {
    padding: "28px",
    backgroundColor: "#ffffff",
    border: "1px solid #deded5",
    borderTop: "0",
    borderRadius: "0 0 8px 8px",
    fontFamily: fontStack,
  },
  text: {
    margin: "0 0 24px",
    color: "#42423b",
    fontSize: "15px",
    lineHeight: "1.65",
    whiteSpace: "pre-wrap" as const,
    fontFamily: fontStack,
  },
  button: {
    display: "inline-block",
    padding: "13px 20px",
    backgroundColor: "#243b36",
    color: "#ffffff",
    borderRadius: "6px",
    fontSize: "15px",
    fontWeight: 700,
    textDecoration: "none",
    fontFamily: fontStack,
  },
  hr: {
    margin: "24px 0",
    borderColor: "#deded5",
  },
  footer: {
    margin: 0,
    color: "#77766e",
    fontSize: "12px",
    lineHeight: "1.5",
    textAlign: "center" as const,
    fontFamily: fontStack,
  },
};