import { Chip as MuiTag } from '@mui/material';
import { styled, useTheme } from '@mui/material/styles';
import React from 'react';
import { TagBaseProps } from '../interfaces';


const TagStyled = styled(MuiTag)({
  color: '#FFFF',
});

export const Tag = ({ label, color = 'primary', outlined = false, ...props }: TagBaseProps) => {
  const theme = useTheme()

  const colorMap: Record<string, string> = {
  primary: theme.palette.primary.main,
  secondary: theme.palette.secondary.main,
  error: theme.palette.error.main,
  warning: theme.palette.warning.main,
  info: theme.palette.info.main,
  success: theme.palette.success.main,
};
  return (
    <TagStyled
      label={label}
      sx={{
        color: outlined !== true ? '#FFFF' : colorMap[color],
        backgroundColor: outlined !== true ? colorMap[color] : 'inherit',
        border: `1px solid ${colorMap[color]}`,
      }}
      {...props}
    />
  );
};