import { cn } from '@lib/utils';

const RING_TYPE = {
  admin: 'after:inset-ring-cyan-500',
  user: 'after:inset-ring-green-500',
  member: 'after:inset-ring-blue-500',
  owner: 'after:inset-ring-red-500',
};

type RoleRingProps = {
  children: React.ReactNode;
  type?: string | null;
};

const RoleRing: React.FC<RoleRingProps> = ({ children, type }) => {
  return (
    <div
      className={cn(
        'w-fit relative after:rounded-full after:block after:w-full after:h-full after:absolute after:top-0 after:left-0 after:inset-ring-3',
        RING_TYPE[type as keyof typeof RING_TYPE],
      )}
    >
      {children}
    </div>
  );
};

export default RoleRing;
