/* eslint-disable react/no-danger */
import * as React from 'react';
import Box from '@mui/material/Box';
import { useTranslate } from "../../i18n/index.js";
import { ToggleDisplayOption, useApiPageOption } from "./ToggleDisplayOption.js";
import { SectionTitle } from "../../SectionTitle/index.js";
import PropertiesTable from "../table/PropertiesTable.js";
import PropertiesList from "../list/PropertiesList.js";
import { getPropsApiDefinitions } from "../definitions/properties.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function PropertiesSection(props) {
  const {
    properties,
    propertiesDescriptions,
    componentName,
    title = 'api-docs.props',
    titleHash = 'props',
    level = 'h2',
    spreadHint,
    defaultLayout,
    layoutStorageKey,
    showOptionalAbbr
  } = props;
  const t = useTranslate();
  const [displayOption, setDisplayOption] = useApiPageOption(layoutStorageKey, defaultLayout);
  const formattedProperties = Array.isArray(properties) ? properties : getPropsApiDefinitions({
    properties,
    propertiesDescriptions: propertiesDescriptions,
    componentName: componentName,
    showOptionalAbbr
  });
  return /*#__PURE__*/_jsxs(React.Fragment, {
    children: [/*#__PURE__*/_jsxs(Box, {
      sx: {
        display: 'flex',
        alignItems: 'baseline',
        mb: 1
      },
      children: [/*#__PURE__*/_jsx(SectionTitle, {
        title: t(title),
        hash: titleHash,
        level: level
      }), /*#__PURE__*/_jsx(ToggleDisplayOption, {
        displayOption: displayOption,
        setDisplayOption: setDisplayOption,
        sectionType: "props"
      })]
    }), spreadHint && /*#__PURE__*/_jsx("p", {
      dangerouslySetInnerHTML: {
        __html: spreadHint
      }
    }), displayOption === 'table' ? /*#__PURE__*/_jsx(PropertiesTable, {
      properties: formattedProperties
    }) : /*#__PURE__*/_jsx(PropertiesList, {
      properties: formattedProperties,
      displayOption: displayOption
    })]
  });
}