'use client';

/*
# PROMPT

this is a subset of a typescript project

clone `LessonTypeCount`, `LessonCategoriesCount` to `UserCount` and do modifiy to get the count of users, thanks.
*/
import * as React from 'react';
import getAllLessonCategoriesCount from '@/db/LessonCategories/GetAllCount.tsx';
import { ListChecks as ListChecksIcon } from '@phosphor-icons/react/dist/ssr/ListChecks';
import { useTranslation } from 'react-i18next';

import { Summary } from '@/components/dashboard/overview/summary';

import { LoadingSummary } from '../LoadingSummary';

function LessonCategoriesCount(): React.JSX.Element {
  const { t } = useTranslation();
  const [amount, setAmount] = React.useState<number>(0);
  const [showLoading, setShowLoading] = React.useState<boolean>(true);
  const [showError, setShowError] = React.useState<boolean>(false);
  const [errorDetail, setErrorDetail] = React.useState<string>('');

  React.useEffect(() => {
    async function count(): Promise<void> {
      try {
        const tempCount = await getAllLessonCategoriesCount();
        setAmount(tempCount);
      } catch (error) {
        setAmount(-9);
        setErrorDetail(JSON.stringify(error));
        setShowError(true);
      } finally {
        setShowLoading(false);
      }
    }
    void count();
  }, []);

  if (showLoading) {
    return <LoadingSummary diff={10} icon={ListChecksIcon} title={t('用戶數量')} trend="up" />;
  }

  if (showError) return <div>{errorDetail}</div>;

  return (
    <Summary
      amount={amount}
      diff={15}
      icon={ListChecksIcon}
      title={t('課程類別')}
      trend="up"
      //
    />
  );
}

export default React.memo(LessonCategoriesCount);
