import TableSimple from "~/components/ui/tables/TableSimple";
import { CreditTypes } from "../dtos/CreditType";
import { useTranslation } from "react-i18next";
import { useLocaleFormatters } from "~/locale/format";

export default function CreditsTableInfo() {
  const { t } = useTranslation();
  const formatters = useLocaleFormatters();
  return (
    <div className="space-y-3">
      <div className="space-y-2">
        <h3 className="text-lg font-medium">{t("models.credit.whatIs")}</h3>
        <p className="text-muted-foreground text-sm">{t("models.credit.info")}</p>
      </div>
      <TableSimple
        items={CreditTypes}
        headers={[
          {
            name: "name",
            title: t("shared.name"),
            className: "w-full",
            value: (item) => (
              <div className="flex flex-col">
                <div className="font-bold">{t(item.name)}</div>
                <div className="text-muted-foreground text-xs">{t(item.description)}</div>
              </div>
            ),
          },
          {
            name: "amount",
            title: t("models.credit.plural"),
            align: "right",
            value: (item) => formatters.number(item.amount),
          },
        ]}
      />
    </div>
  );
}