import { use } from "react";

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

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

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

export default function MeditationSection({ promise }: { promise: Promise<Meditation[]> }) {
    const meditations = use(promise);
    const columns = meditations?.length;

    return (
        <Section title="Meditations" contentClassName={styles.sectionContent}>
            <Grid columns={columns} className={styles.grid}>
                {meditations.map((meditation) => (
                    <MeditationCard key={meditation._id} {...meditation} />
                ))}
            </Grid>
        </Section>
    )
}

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