1import React from 'react';
2
3import { InlineCode } from '~/components/base/code';
4import { LI, UL } from '~/components/base/list';
5import { H2, H3Code } from '~/components/plugins/Headings';
6import { InterfaceDefinitionData, InterfaceValueData } from '~/components/plugins/api/APIDataTypes';
7import { CommentTextBlock, mdInlineRenderers } from '~/components/plugins/api/APISectionUtils';
8
9export type APISectionInterfacesProps = {
10  data: InterfaceDefinitionData[];
11};
12
13const renderInterface = ({ name, children, comment }: InterfaceDefinitionData): JSX.Element => (
14  <div key={`interface-definition-${name}`}>
15    <H3Code>
16      <InlineCode>{name}</InlineCode>
17    </H3Code>
18    <CommentTextBlock comment={comment} />
19    <UL>
20      {children.map((interfaceValue: InterfaceValueData) => (
21        <LI key={interfaceValue.name}>
22          <InlineCode>
23            {name}.{interfaceValue.name}
24            {interfaceValue.type.declaration?.signatures ? '()' : ''}
25          </InlineCode>
26          <CommentTextBlock
27            comment={interfaceValue.comment}
28            renderers={mdInlineRenderers}
29            withDash
30          />
31        </LI>
32      ))}
33    </UL>
34  </div>
35);
36
37const APISectionInterfaces: React.FC<APISectionInterfacesProps> = ({ data }) =>
38  data?.length ? (
39    <>
40      <H2 key="interfaces-header">Interfaces</H2>
41      {data.map(renderInterface)}
42    </>
43  ) : null;
44
45export default APISectionInterfaces;
46