import { use } from "react";
import { getTranslations } from "next-intl/server";

import { Skeleton, Typography } from "@/components/ui";
import { UserSubscription } from "@/entities/subscriptions/types";

import SubscriptionTable from "../SubscriptionTable/SubscriptionTable";

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

export default function SubscriptionsList({
  promise,
}: {
  promise: Promise<UserSubscription[]>;
}) {
  const t = use(getTranslations("Subscriptions"));

  const subscriptions = use(promise);

  if (subscriptions?.length === 0) {
    return (
      <div className={styles.container}>
        <Typography as="p" className={styles.description}>
          {t("no_subscriptions")}
        </Typography>
      </div>
    );
  }

  return (
    <>
      {subscriptions.map(subscription => {
        return (
          <SubscriptionTable
            subscription={subscription}
            key={subscription.id}
          />
        );
      })}
      {/* <SubscriptionTable subscription={subscriptions[0]} key={subscriptions[0].id} /> */}
    </>
  );
}

export function SubscriptionsListSkeleton() {
  return <Skeleton style={{ height: "300px" }} className={styles.skeleton} />;
}
