import { VenueFragment } from "@/gql/graphql";
import { VenueItem } from "./VenueItem";
import styles from "./venueList.module.scss";
import { SectionHeader } from "../general/SectionHeader";

export const VenueList = ({
  venues,
  heading,
}: {
  venues: VenueFragment[];
  heading?: string;
}) => {
  return (
    <div>
      {heading && (
        <SectionHeader heading={heading} />
      )}
      <ul className={styles.venueList}>
        {venues.map((venue) => (
          <VenueItem key={venue.id} venue={venue} />
        ))}
      </ul>
    </div>
  );
};
