import { AutoGrid } from ':components/AutoGrid.tsx'
import MemberCardList from ':islands/MemberCardList.tsx'

export default function Membres() {
	return (
		<>
			<h1>Nos membres</h1>
			<section>
				<h2>Permanents</h2>
				<AutoGrid columnWidth='15rem'>
					<MemberCardList
						filters={[['group', 'user.admin']]}
						usePlaceholder={true}
						useObserver={true}
					/>
				</AutoGrid>
			</section>
			<section>
				<h2>Bénévoles</h2>
				<AutoGrid columnWidth='15rem'>
					<MemberCardList
						filters={[['group', 'user.member']]}
						usePlaceholder={true}
						useObserver={true}
					/>
				</AutoGrid>
			</section>
			<section>
				<h2>Service civique</h2>
				{/* <AutoGrid columnWidth='15rem'></AutoGrid> */}
			</section>
			<section>
				<h2>Stage</h2>
				{/* <AutoGrid columnWidth='15rem'></AutoGrid> */}
			</section>
			<section>
				<h2>Étudiants</h2>
				{/* <AutoGrid columnWidth='15rem'></AutoGrid> */}
			</section>
		</>
	)
}