import * as React from "react";
import { Link } from "@react-email/components";
import { EmailLayout } from "../components/email-layout";
import { EmailHeader } from "../components/email-header";
import { EmailFooter } from "../components/email-footer";
import { EmailSummaryTable } from "../components/email-field";
import { emailTokens } from "../tokens";

export interface NewsletterInternalEmailProps {
  email: string;
  subscribedAt?: string;
}

export function NewsletterInternalEmail({
  email,
  subscribedAt,
}: NewsletterInternalEmailProps) {
  return (
    <EmailLayout previewText={`New newsletter subscriber: ${email}`}>
      <EmailHeader badge="Subscriber" />

      <h1
        style={{
          fontFamily: emailTokens.fonts.display,
          fontSize: "22px",
          fontWeight: 700,
          color: emailTokens.colors.textPrimary,
          margin: "0 0 10px",
          lineHeight: "1.25",
          letterSpacing: "-0.4px",
        }}
      >
        New newsletter subscriber
      </h1>

      <p
        style={{
          fontSize: "14px",
          color: emailTokens.colors.textSecondary,
          margin: "0 0 16px",
          lineHeight: "1.5",
        }}
      >
        A visitor opted in to receive Quto AI engineering articles and voice AI updates.
      </p>

      <EmailSummaryTable
        fields={[
          {
            label: "Subscriber Email",
            value: (
              <Link href={`mailto:${email}`} style={{ color: emailTokens.colors.textPrimary, textDecoration: "underline" }}>
                {email}
              </Link>
            ),
          },
          {
            label: "Subscribed At",
            value: subscribedAt || new Date().toUTCString(),
            isMono: true,
          },
        ]}
      />

      <EmailFooter />
    </EmailLayout>
  );
}