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 { MeditationCard } from "../../cards";

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

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

export default function MeditationSection({
  promise,
  gridDisplayMode = "horizontal",
}: MeditationSectionProps) {
  const meditations = use(promise);

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

  const columns = meditations.length;

  return (
    <Section title="Meditations" contentClassName={styles.sectionContent}>
      <Grid
        columns={columns}
        className={clsx(styles.grid, styles[gridDisplayMode])}
      >
        {meditations.map(meditation => (
          <Link href={ROUTES.meditation(meditation._id)} key={meditation._id}>
            <MeditationCard
              className={clsx(
                gridDisplayMode === "vertical" && styles.cardVertical
              )}
              key={meditation._id}
              {...meditation}
            />
          </Link>
        ))}
      </Grid>
    </Section>
  );
}

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