import * as React from "react";
import { Button } from "@react-email/components";
import { emailTokens } from "../tokens";

export interface EmailButtonProps {
  href: string;
  children: React.ReactNode;
  align?: "left" | "center";
}

export function EmailButton({ href, children, align = "left" }: EmailButtonProps) {
  return (
    <div
      style={{
        textAlign: align,
        margin: "24px 0",
      }}
    >
      <Button
        href={href}
        style={{
          backgroundColor: emailTokens.colors.buttonBg,
          color: emailTokens.colors.buttonText,
          fontFamily: emailTokens.fonts.body,
          fontSize: "13px",
          fontWeight: 600,
          textDecoration: "none",
          textAlign: "center",
          borderRadius: emailTokens.layout.buttonRadius,
          padding: "13px 26px",
          display: "inline-block",
          lineHeight: "1",
          letterSpacing: "-0.2px",
          boxShadow: "0 1px 2px rgba(0,0,0,0.08)",
        }}
      >
        {children}
      </Button>
    </div>
  );
}