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

export function MemberCard(
	{ id, icon, name, groups }: MemberCardProps,
) {
	return (
		<div class='components__member_card' style={{ backgroundImage: icon }}>
			<div class='components__member_card__spacer'></div>
			<div class='components__member_card__content'>
				<h3>
					<a href={`/membres/${id}`}>{name}</a>
				</h3>
				<div class='components__member_card__groups'>
					{groups.map((group) => <span>{group}</span>)}
				</div>
			</div>
		</div>
	)
}