import { AutoGrid } from ':components/AutoGrid.tsx'
import { MemberCard, memberMock } from ':components/MemberCard.tsx'

export default function Membres() {
	return (
		<>
			<h1>Nos membres</h1>
			<section>
				<h2>Permanents</h2>
				<AutoGrid columnWidth='15rem'>
					{memberMock.slice(0, 5).map(MemberCard)}
				</AutoGrid>
			</section>
			<section>
				<h2>Bénévoles</h2>
				<AutoGrid columnWidth='15rem'>
					{memberMock.slice(5, 10).map(MemberCard)}
				</AutoGrid>
			</section>
			<section>
				<h2>Service civique</h2>
				<AutoGrid columnWidth='15rem'>
					{memberMock.slice(10, 15).map(MemberCard)}
				</AutoGrid>
			</section>
			<section>
				<h2>Stage</h2>
				<AutoGrid columnWidth='15rem'>
					{memberMock.slice(15, 20).map(MemberCard)}
				</AutoGrid>
			</section>
			<section>
				<h2>Étudiants</h2>
				<AutoGrid columnWidth='15rem'>
					{memberMock.slice(0, 5).map(MemberCard)}
				</AutoGrid>
			</section>
		</>
	)
}