"use client";

import React from "react";
import ApiKeyManagement from "@/components/api-keys/ApiKeyManagement";
import ApiUsageDocs from "@/components/ApiUsageDocs";
import PageBreadCrumb from "@/components/common/PageBreadCrumb";
import { useTranslations } from "next-intl";

export default function ApiKeysClient() {
  const t = useTranslations("ApiKeys");
  return (
    <div className="mx-auto max-w-(--breakpoint-2xl) p-4 md:p-6 lg:p-10">
      <PageBreadCrumb pageTitle={t("page_title")} />
      
      <div className="mt-6 space-y-6">
        <ApiKeyManagement />
        <ApiUsageDocs />
      </div>
    </div>
  );
}
