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

import { UsageMeter } from "@/components/billing/usage-meter";
import { getOrgUsage } from "@/lib/data/usage";

export async function UsageSection({ organizationId }: { organizationId: string }) {
  const usage = await getOrgUsage(organizationId);
  const t = await getTranslations("Billing.usage");
  return (
    <section className="grid gap-4 rounded-lg border p-4 sm:grid-cols-3">
      <UsageMeter label={t("tests")} used={usage.tests.used} limit={usage.tests.limit} />
      <UsageMeter label={t("sites")} used={usage.sites.used} limit={usage.sites.limit} />
      <UsageMeter label={t("seats")} used={usage.seats.used} limit={usage.seats.limit} />
    </section>
  );
}