"use client";

import { use } from "react";
import Link from "next/link";
import clsx from "clsx";

import { Grid, Section, Skeleton } from "@/components/ui";
import { Action } from "@/entities/dashboard/types";
import { ROUTES } from "@/shared/constants/client-routes";

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

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

interface CompatibilitySectionProps {
  promise: Promise<Action[]>;
  gridDisplayMode?: "vertical" | "horizontal";
}

export default function CompatibilitySection({
  promise,
  gridDisplayMode = "horizontal",
}: CompatibilitySectionProps) {
  const compatibilities = use(promise);

  if (!compatibilities || compatibilities.length === 0) {
    return null;
  }

  const columns = Math.ceil(compatibilities.length / 2);

  return (
    <Section title="Compatibility" contentClassName={styles.sectionContent}>
      <Grid
        columns={columns}
        className={clsx(styles.grid, styles[gridDisplayMode])}
      >
        {compatibilities.map(compatibility => (
          <Link
            href={ROUTES.compatibility(compatibility._id)}
            key={compatibility._id}
          >
            <CompatibilityCard key={compatibility._id} {...compatibility} />
          </Link>
        ))}
      </Grid>
    </Section>
  );
}

export function CompatibilitySectionSkeleton() {
  return (
    <Section title="Compatibility" contentClassName={styles.sectionContent}>
      <Skeleton className={styles.skeleton} />
    </Section>
  );
}