import { ElementsTooltip } from "@ax/components";
import type { IRole } from "@ax/types";

import * as S from "./style";

const RoleItem = ({ title, description, roles, isSuperAdmin = false }: IProps) => {
	const rolesString = isSuperAdmin ? ["Super-admin"] : roles.map((role: IRole) => role.name);

	const colors = isSuperAdmin
		? { "Super-admin": "#E7CBFE" }
		: rolesString?.reduce((prev: Record<string, string | undefined>, current) => {
				const color: IRole | undefined = roles.find((role: IRole) => role.name === current);
				prev[current] = color?.hex;
				return prev;
			}, {});

	return (
		<S.Wrapper>
			<S.Title>{title}</S.Title>
			<S.Description>{description}</S.Description>
			<S.TagWrapper>
				<ElementsTooltip
					elements={rolesString}
					maxChar={30}
					rounded={true}
					defaultElements={1}
					elementsPerRow={2}
					colors={colors}
				/>
			</S.TagWrapper>
		</S.Wrapper>
	);
};

interface IProps {
	title: string;
	description: string;
	roles: IRole[];
	isSuperAdmin?: boolean;
}

export default RoleItem;
