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

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

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

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

export default function PalmSection({
  promise,
}: {
  promise: Promise<Action[]>;
}) {
  const palms = use(promise);

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

  const columns = palms.length;

  return (
    <Section title="Palm" contentClassName={styles.sectionContent}>
      <Grid columns={columns} className={styles.grid}>
        {palms.map(palm => (
          <Link href={ROUTES.palmistryResult(palm._id)} key={palm._id}>
            <PalmCard key={palm._id} {...palm} />
          </Link>
        ))}
      </Grid>
    </Section>
  );
}

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