import { ApiKeyWithEnvDto } from "@montelo/browser-client";
import { FC } from "react";
import { ApiKeyRow } from "~/components/dialogs/ApiKeys/ApiKeyRow";
import { Table, TableBody, TableHead, TableHeader, TableRow } from "~/components/ui/table";

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

export const ApiKeysTable: FC<ApiKeysTableProps> = ({ sortedEnvironments, projectId }) => {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Environment</TableHead>
          <TableHead>API Key</TableHead>
          <TableHead>Actions</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {sortedEnvironments.map((apiKey) => (
          <ApiKeyRow key={apiKey.id} apiKey={apiKey} projectId={projectId} />
        ))}
      </TableBody>
    </Table>
  );
};
