import { Grid, Section } from "@/components/ui";
import { PartnerPortrait } from "@/entities/dashboard/types";

import { PortraitCard } from "../../cards";

import styles from "./PortraitsSection.module.scss";

interface PortraitsSectionProps {
  portraits: PartnerPortrait[];
}

export default function PortraitsSection({ portraits }: PortraitsSectionProps) {
  if (!portraits || portraits.length === 0) {
    return null;
  }

  return (
    <Section title="Portraits" contentClassName={styles.sectionContent}>
      <Grid columns={portraits.length} className={styles.grid}>
        {portraits.map(portrait => (
          <PortraitCard key={portrait._id} {...portrait} />
        ))}
      </Grid>
    </Section>
  );
}
