import React from 'react';

import { Tag } from 'antd';

// Color mapping for different roles
const roleColorMap: Record<string, string> = {
  OFFICE: 'green',
  CES: 'blue',
  INFRA: 'purple',
  FIT: 'green',
  SECURITY: 'green',
  COST: 'gold',
  HR: 'orange',
  HR_AMER: 'coral',
  HR_APAC: 'khaki',
  HR_EMEA: 'amber',
  HR_MALAYSIA: 'pink',
  HR_SINGAPORE: 'lightblue',
  OMC: 'magenta',
  PRODUCT: 'cyan',
  SYSTEM_ADMIN: 'red',
  FEATURE_IOA_DEVICE_IP: 'green',
  BUSINESS_TRIP: 'teal',
};

type Props = {
  role: string;
};

export const RoleStatusTag: React.FC<Props> = ({ role }) => {
  const color = roleColorMap[role] || 'blue';

  return (
    <Tag
      style={{
        textTransform: 'capitalize',
      }}
      color={color}
      title={role}
    >
      {role.toLowerCase()}
    </Tag>
  );
};
