import clsx from 'clsx';
import { memo } from 'react';
import makeStyles from '@mui/styles/makeStyles';
import type { Theme } from '../@styles/theme-provider';

const createClasses = makeStyles<Theme, Pick<TextWithBorderProps, 'color'>>(theme => ({
  root: props => {
    const color = props.color || 'inherit';
    return {
      ...theme.typography.caption2,
      display: 'inline-block',
      borderStyle: 'solid',
      borderWidth: '1px',
      borderRadius: theme.spacing(1.5),
      padding: theme.spacing(0, 1),
      backgroundColor: theme.palette.common.white,
      borderColor: color,
      color
    };
  }
}));

export interface TextWithBorderProps {
  /**
   * Textual to be displayed.
   */
  content: string;
  /**
   * Color of the text and border.
   */
  color?: string;
  /**
   * Custom class name in case you need to add custom styles to the component.
   */
  className?: string;
}

const TextWithBorder = (props: TextWithBorderProps) => {
  const { content, color, className } = props;

  const classes = createClasses({ color });

  return <span className={clsx(classes.root, className)}>{content}</span>;
};

const m = memo(TextWithBorder);
export { m as TextWithBorder };