import { AssociationFragment } from "@/gql/graphql";
import { AssociationItem } from "./AssociationItem";
import styles from "./associationList.module.scss";
import { SectionHeader } from "../general/SectionHeader";

export const AssociationList = ({
  associations,
  heading
}: {
  associations: AssociationFragment[];
  heading: string
}) => {
  return (
    <section>
      {heading && (
        <SectionHeader heading={heading} />
      )}
      <ul className={styles.associationList}>
        {associations.map((association) => (
          <AssociationItem key={association.id} association={association} />
        ))}
      </ul>
    </section>
  );
};
