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>
	)
}

export const memberMock: MemberCardProps[] = Array(50).fill(undefined).map(
	(_, index) => {
		return {
			name: `Michel ${randomLastName()}`,
			groups: ['FabManager', 'Étudiant'],
			icon: `url("https://thispersondoesnotexist.com/")`,
			id: String(index),
		}
	},
)

function randomLastName() {
	const randomArray = Math.round(Math.random() * 1e8).toString().split('').map(
		Number,
	)

	const [first, ...tail] = randomArray.map((number) =>
		String.fromCodePoint(number + 97)
	)

	return [first.toLocaleUpperCase(), ...tail].join('')
}