import Typography from '@mui/material/Typography';
import _ from '@lodash';
import clsx from 'clsx';
import { memo, useMemo } from 'react';

function MetaMark({ className, category, status }) {
  const text = useMemo(
    () => (status ? `Status: ${_.startCase(status)}` : _.startCase(category)),
    [category, status]
  );

  return (
    <Typography
      variant="body1"
      className={clsx(
        'flex justify-center align-center px-20 py-2 font-medium border-2 rounded-8',
        className
      )}
    >
      {text}
    </Typography>
  );
}

export default memo(MetaMark);
