import { observer } from 'mobx-react';
import { Text } from '../Text';
import { CSSProperties } from 'glamor';
import React from 'react';
import { useApphouse } from '../../context/useApphouse';
import { setAlpha } from '../../utils/color/setAlpha';
import { mergeStyles } from '../../styles/mergeStyles';
import { ApphouseComponent } from '../component.interfaces';
/**
 * Props for the TextCode component
 */
export interface TextCodeProps extends ApphouseComponent<CSSProperties> {
  children: React.ReactNode;
}
/**
 * A Text decorator component that is used primarily to decorate code
 */
export const TextCode = observer((props: TextCodeProps) => {
  const { children, styleOverwrites } = props;
  const { theme } = useApphouse();
  return (
    <Text
      as="span"
      styleOverwrites={mergeStyles(
        {
          fontFamily: '"Fira code", "Fira Mono", monospace',
          backgroundColor: setAlpha(theme.colors.brand, 0.5),
          border: `1px solid ${setAlpha(theme.colors.brand, 0.7)}`,
          paddingRight: theme.tokens.spacings.xs,
          paddingLeft: theme.tokens.spacings.xs,
          borderRadius: theme.tokens.radius.default,
          marginLeft: theme.tokens.spacings.xs,
          marginRight: theme.tokens.spacings.xs
        },
        styleOverwrites
      )}
    >
      {children}
    </Text>
  );
});