/**
 * Horizontal rule rendered as a table-with-border-top so it renders
 * consistently across Outlook + every webmail client.
 */

import { defaultTheme } from "../../theme/theme.js";
import { h } from "../../vnode/vnode.js";
import type { VNode } from "../../vnode/vnode.types.js";
import type { EmailDividerProps } from "./email-divider.types.js";

export function EmailDivider(props: EmailDividerProps): VNode {
    const { theme = defaultTheme, color, style } = props;
    const lineColor = color ?? theme.colors.border;
    return h(
        "table",
        {
            role: "presentation",
            cellpadding: 0,
            cellspacing: 0,
            style: {
                width: "100%",
                margin: `${theme.spacing.md} 0`,
            },
        },
        h(
            "tr",
            {},
            h(
                "td",
                {
                    style: {
                        "border-top": `1px solid ${lineColor}`,
                        "font-size": "1px",
                        "line-height": "1px",
                        ...(style ?? {}),
                    },
                },
                " "
            )
        )
    );
}