import Link from "next/link";

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 => (
          <Link
            href={portrait.status === "done" && portrait.imageUrl ? `/portraits/${portrait._id}` : "#"}
            key={portrait._id}
            className={portrait.status === "done" && portrait.imageUrl ? "" : styles.disabledLink}
          >
            <PortraitCard {...portrait} />
          </Link>
        ))}
      </Grid>
    </Section>
  );
}