import React from 'react';
import { Chip as MuiTag } from '@mui/material';
import { TagBaseProps } from '../interfaces';
import { palette } from '../helpers';
import { styled } from '@mui/material/styles';
import { ColorVariant } from '@/types';

const colorMap: Record<ColorVariant, string> = {
  inherit: palette.inherit,
  primary: palette.primary,
  secondary: palette.secondary,
  error: palette.error,
  warning: palette.warning,
  info: palette.info,
  success: palette.success,
};

const TagStyled = styled(MuiTag)({});

export const Tag = ({ label, color = 'primary', outlined = false, ...props }: TagBaseProps) => {
  
  return (
    <TagStyled
      label={label}
      sx={{
        color: outlined !== true ? '#FFFF' : colorMap[color],
        backgroundColor: outlined !== true ? colorMap[color] : 'inherit',
        border: `1px solid ${colorMap[color]}`,
      }}
      {...props}
    />
  );
};