import { Column, Row, Section, Text } from "react-email";
import { colors, fonts, radius } from "./theme";

interface CodeBoxProps {
  code: string;
}

export const CodeBox = ({ code }: CodeBoxProps) => (
  <Section style={boxStyle}>
    <Row>
      <Column style={cellStyle}>
        <Text style={codeStyle}>{code}</Text>
      </Column>
    </Row>
  </Section>
);

const boxStyle = {
  margin: "8px 0 0 0",
  backgroundColor: colors.muted,
  border: `1px solid ${colors.border}`,
  borderRadius: radius.box,
};

const cellStyle = {
  padding: "20px 16px",
  textAlign: "center" as const,
};

const codeStyle = {
  margin: 0,
  fontFamily: fonts.mono,
  fontSize: "32px",
  lineHeight: "40px",
  fontWeight: 600,
  letterSpacing: "8px",
  paddingLeft: "8px",
  color: colors.foreground,
};