"use client";

import { memo } from "react";
import type { CreditsViewProps } from "./Credits.types";

function CreditsView({ heading, rows }: CreditsViewProps) {
  return (
    <section
      data-figma-node="24240:1547"
      className="flex flex-col items-center bg-black px-[var(--space-400)] py-16 md:px-16 lg:px-20 lg:py-[var(--space-3000)]"
      aria-labelledby="about-credits-heading"
    >
      <div className="flex w-full max-w-[800px] flex-col items-center gap-12">
        <h2
          id="about-credits-heading"
          className="text-center font-bricolage-grotesque text-heading-l text-[var(--color-content-default-primary)]"
        >
          {heading}
        </h2>
        <dl className="m-0 flex w-full flex-col gap-5">
          {rows.map((row) => (
            <div
              key={row.role}
              className="flex flex-col gap-1 border-b border-[var(--color-border-default-tertiary)] pb-4"
            >
              <dt className="font-inter text-label-caps-xxs text-[var(--color-content-default-tertiary)] uppercase">
                {row.role}
              </dt>
              <dd className="m-0 font-inter text-paragraph-s text-[var(--color-content-default-primary)]">
                {row.name}
              </dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}

CreditsView.displayName = "CreditsView";

export default memo(CreditsView);