"use client";

import { ThemeColor } from "./types";

export function EmailReactEmail({ themeColor }: { themeColor?: ThemeColor }) {
  return (
    <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "center", height: "100%", padding: "18px 16px", fontFamily: "system-ui, sans-serif", background: "#f6f9fc", overflow: "auto" }}>
      <div style={{ width: "100%", maxWidth: 380, background: "#fff", borderRadius: 8, boxShadow: "0 2px 8px rgba(0,0,0,0.08)" }}>
        <div style={{ padding: "14px 24px", borderBottom: "1px solid #e6e6e6", display: "flex", alignItems: "center", gap: 7 }}>
          <div style={{ width: 18, height: 18, borderRadius: 4, background: "#000" }} />
          <span style={{ fontWeight: 700, fontSize: 11, color: "#09090b" }}>Acme</span>
        </div>
        <div style={{ padding: "20px 24px" }}>
          <p style={{ fontSize: 14, fontWeight: 700, color: "#09090b", marginBottom: 8 }}>Welcome to Acme! 🎉</p>
          <p style={{ fontSize: 11, color: "#71717a", marginBottom: 16, lineHeight: 1.6 }}>Hi Alice, thanks for signing up. Your account is ready and you can start building right away.</p>
          <div style={{ textAlign: "center", marginBottom: 16 }}>
            <button style={{ height: 34, padding: "0 22px", borderRadius: 6, fontSize: 11, fontWeight: 600, color: "#fff", background: "#000", border: "none", cursor: "pointer" }}>Get started →</button>
          </div>
          <div style={{ borderRadius: 7, padding: "12px 14px", marginBottom: 16, background: "#f6f9fc", border: "1px solid #e6e6e6" }}>
            <p style={{ fontSize: 10, fontWeight: 600, color: "#374151", marginBottom: 6 }}>Your account details</p>
            {["Plan: Starter", "Workspace: alice-workspace", "Status: Active"].map(d => (
              <p key={d} style={{ fontSize: 10, color: "#71717a", marginBottom: 2 }}>{d}</p>
            ))}
          </div>
          <p style={{ fontSize: 10, color: "#9ca3af", lineHeight: 1.6 }}>If you have any questions, reply to this email or visit our help center. We&apos;re here to help.</p>
        </div>
        <div style={{ padding: "12px 24px", textAlign: "center", borderTop: "1px solid #e6e6e6", background: "#fafafa" }}>
          <p style={{ fontSize: 9, color: "#9ca3af" }}>Acme Inc · 123 Main St · San Francisco CA · <span style={{ textDecoration: "underline" }}>Unsubscribe</span></p>
        </div>
      </div>
    </div>
  );
}