import * as React from 'react';
import { TagProps } from 'src/types/op-tag';

import './index.scss';

const configMap = {
  primary: {
    color: '#fff',
    backGroundColor: '#196EE6',
  },
  error: {
    color: '#fff',
    backGroundColor: '#FE3824',
  },
  success: {
    color: '#fff',
    backGroundColor: '#00BF29',
  },
  warning: {
    color: '#000',
    backGroundColor: '#FFD119',
  },
  disabled: {
    color: '#000000',
    backGroundColor: '#D3E2F0',
  },
};

export default function OPTag(props: TagProps) {
  const {
    children,
    type = 'primary',
    color,
    backGroundColor = '',
    style,
    customConfig = {},
  } = props;
  const mergedMap = {
    ...configMap,
    ...(customConfig || {}),
  };
  const config = mergedMap[type ?? 'primary'] ?? mergedMap.primary;
  return (
    <div
      className='op-tag'
      style={{
        color: color || config.color,
        backgroundColor: backGroundColor || config.backGroundColor,
        ...(style || {}),
      }}
    >
      {children}
    </div>
  );
}