import Layout from "components/Layout";
import MemberCard from "components/MemberCard";
import Separator from "components/Separator";
import team from "data/team.json";

export default function Team() {
	return (
		<Layout>
			<Separator>Tagjaink</Separator>
			<h4 className="m-4 text-center text-xl">
				A fotók még végső vágáson esnek át, addig is gyönyörködjetek a random
				cicás mímíkben amiket a HDD-m en találtam.
			</h4>
			<section className="container grid gap-12 grid-cols-1 2xl:grid-cols-4 justify-items-center mx-auto my-8 sm:grid-cols-2 lg:grid-cols-3">
				<MemberCard
					{...team.leader}
					className="col-span-1 2xl:col-span-4 sm:col-span-2 lg:col-span-3"
				/>

				<div className="col-span-1 2xl:col-span-4 my-2 px-8 w-full opacity-50 sm:col-span-2 sm:px-16 lg:col-span-3 lg:px-32">
					<hr className="w-full border-pink opacity-50" />
				</div>

				{team.leadership.map((member) => {
					return <MemberCard key={member.name} {...member} />;
				})}

				<div className="col-span-1 2xl:col-span-4 my-2 px-8 w-full opacity-50 sm:col-span-2 sm:px-16 lg:col-span-3 lg:px-32">
					<hr className="w-full border-pink opacity-50" />
				</div>

				{team.members.map((member) => {
					return <MemberCard key={member.name} {...member} />;
				})}

				<div className="col-span-1 2xl:col-span-4 my-2 px-8 w-full opacity-50 sm:col-span-2 sm:px-16 lg:col-span-3 lg:px-32">
					<hr className="w-full border-pink opacity-50" />
				</div>

				{team.oldMembers.map((member) => {
					return <MemberCard key={member.name} {...member} />;
				})}
			</section>
		</Layout>
	);
}