import { ApiKeyWithEnvDto } from "@montelo/browser-client";
import { AlertTriangle } from "lucide-react";
import { ApiKeysTable } from "~/components/dialogs/ApiKeys/ApiKeysTable";
import { Alert, AlertDescription } from "../../ui/alert";
import { DialogContent, DialogHeader, DialogTitle } from "../../ui/dialog";

type ApiKeysDialogContentProps = {
  sortedEnvironments: ApiKeyWithEnvDto[];
  projectId: string;
};

export const ApiKeysDialogContent = (props: ApiKeysDialogContentProps) => {
  return (
    <DialogContent className="min-w-[600px]">
      <DialogHeader>
        <DialogTitle>API Keys</DialogTitle>
      </DialogHeader>
      <div>
        <Alert variant="destructive" className={"mb-4"}>
          <AlertDescription>
            <div className={"text-destructive-foreground flex flex-row items-center gap-4"}>
              <AlertTriangle />
              API keys are only revealed once and will be hidden after.
            </div>
          </AlertDescription>
        </Alert>
        <ApiKeysTable {...props} />
      </div>
    </DialogContent>
  );
};
