1import React from 'react';
2
3import { InlineCode } from '~/components/base/code';
4import { B, P } from '~/components/base/paragraph';
5import { H2, H3Code } from '~/components/plugins/Headings';
6import { ConstantDefinitionData } from '~/components/plugins/api/APIDataTypes';
7import { CommentTextBlock, resolveTypeName } from '~/components/plugins/api/APISectionUtils';
8
9export type APISectionConstantsProps = {
10  data: ConstantDefinitionData[];
11  apiName?: string;
12};
13
14const renderConstant = (
15  { name, comment, type }: ConstantDefinitionData,
16  apiName?: string
17): JSX.Element => (
18  <div key={`constant-definition-${name}`}>
19    <H3Code>
20      <InlineCode>
21        {apiName ? `${apiName}.` : ''}
22        {name}
23      </InlineCode>
24    </H3Code>
25    <P>
26      <B>Type:</B> <InlineCode>{resolveTypeName(type)}</InlineCode>
27    </P>
28    <CommentTextBlock comment={comment} />
29  </div>
30);
31
32const APISectionConstants: React.FC<APISectionConstantsProps> = ({ data, apiName }) =>
33  data?.length ? (
34    <>
35      <H2 key="constants-header">Constants</H2>
36      {data.map(constant => renderConstant(constant, apiName))}
37    </>
38  ) : null;
39
40export default APISectionConstants;
41