import React from "react";
import { Box, Flex, SimpleTable, tokens } from "..";
import { Code } from "./Code";

interface EnumItemObject {
  [key: string]: React.ReactText;
}

interface EnumObject {
  [key: string]: EnumItemObject;
}

interface EnumTableProps {
  enums: EnumObject;
}

export const EnumTable = ({ enums }: EnumTableProps) => {
  const enumArray = Object.keys(enums);
  return (
    <SimpleTable className="text-bodySm">
      <SimpleTable.Head>
        <SimpleTable.Row>
          <SimpleTable.HeaderCell>Enum</SimpleTable.HeaderCell>
          <SimpleTable.HeaderCell>Values</SimpleTable.HeaderCell>
        </SimpleTable.Row>
      </SimpleTable.Head>
      <SimpleTable.Body>
        {enumArray.map((enumName) => (
          <SimpleTable.Row className="border-b" key={enumName}>
            <SimpleTable.Cell className="font-medium align-top">
              <code className="mr-6 mt-1 block">{enumName}</code>
            </SimpleTable.Cell>
            <SimpleTable.Cell className="whitespace-normal">
              <Flex className="flex-wrap" style={{ gap: tokens.margin[1] }}>
                {Object.keys(enums[enumName]).map((enumValue) => (
                  <Box key={enumValue}>
                    <Code>{enumValue}</Code>
                  </Box>
                ))}
              </Flex>
            </SimpleTable.Cell>
          </SimpleTable.Row>
        ))}
      </SimpleTable.Body>
    </SimpleTable>
  );
};