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    {type && (
26      <P>
27        <B>Type:</B> <InlineCode>{resolveTypeName(type)}</InlineCode>
28      </P>
29    )}
30    <CommentTextBlock comment={comment} />
31  </div>
32);
33
34const APISectionConstants = ({ data, apiName }: APISectionConstantsProps) =>
35  data?.length ? (
36    <>
37      <H2 key="constants-header">Constants</H2>
38      {data.map(constant => renderConstant(constant, apiName))}
39    </>
40  ) : null;
41
42export default APISectionConstants;
43