import { getStyleScope, useSmartStylesheet } from ':plugins/SmartStylesheet.tsx'

export type MemberCardProps = {
	id: string
	icon: string
	name: string
	groups: string[]
}

const scope = getStyleScope(MemberCard)

export function MemberCard(
	{ id, icon, name, groups }: MemberCardProps,
) {
	useSmartStylesheet(import.meta, { scope })

	return (
		<div class={scope} style={{ backgroundImage: icon }}>
			<div class='spacer'></div>
			<div class='content'>
				<h3>
					<a href={`/membres/${id}`}>{name}</a>
				</h3>
				<div class='groups'>
					{groups.map((group, index) => <span key={index}>{group}</span>)}
				</div>
			</div>
		</div>
	)
}