import Image from "next/image";
import type { TeamBlockValue } from "@/types/wagtail";

export default function Team({ value }: { value: TeamBlockValue }) {
  return (
    <section className="py-24">
      <div className="mx-auto max-w-7xl px-6">
        {value.heading && (
          <h2 className="mb-16 text-4xl font-bold text-slate-900">{value.heading}</h2>
        )}
        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {value.members?.map((member) => (
            <div key={member.id} className="text-center">
              {member.photo ? (
                <Image
                  src={member.photo.url}
                  alt={member.photo.title}
                  width={200}
                  height={200}
                  className="mx-auto mb-4 h-40 w-40 rounded-full object-cover"
                />
              ) : (
                <div className="mx-auto mb-4 h-40 w-40 rounded-full bg-slate-100" />
              )}
              <div className="text-lg font-semibold text-slate-900">
                {member.name}
              </div>
              {member.role && (
                <div className="mb-2 text-sm text-primary">{member.role}</div>
              )}
              {member.bio && (
                <p className="text-sm text-slate-600">{member.bio}</p>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}