import { useMemo } from 'react';
import { badgesOf, type Badge } from '@/lib/roles';
import { useWorkspace } from '@/store/workspace';
import styles from './RoleBadges.module.css';

function List({ items }: { items: Badge[] }) {
  return <>{items.map((badge) => <span key={badge.key} className={`${styles.badge} ${styles[badge.color]}`}>{badge.text}</span>)}</>;
}

/** 名字前后的身份标签:空间主固定一个,其余是身份组里自定义的前缀、后缀 */
export function useBadges(username: string | undefined): { prefix: Badge[]; suffix: Badge[] } {
  const roles = useWorkspace((s) => s.roles);
  const creator = useWorkspace((s) => s.channel?.creatorAccount);
  return useMemo(() => badgesOf(roles, username, creator), [roles, username, creator]);
}

export function NameWithBadges({ username, children }: { username: string | undefined; children: React.ReactNode }) {
  const { prefix, suffix } = useBadges(username);
  return <><List items={prefix} />{children}<List items={suffix} /></>;
}