/* eslint-disable react/no-danger */
import * as React from 'react';
import Box from '@mui/material/Box';
import { useTranslate } from "../../i18n/index.js";
import { SectionTitle } from "../../SectionTitle/index.js";
import SlotsList from "../list/SlotsList.js";
import SlotsTable from "../table/SlotsTable.js";
import { ToggleDisplayOption, useApiPageOption } from "./ToggleDisplayOption.js";
import { getSlotsApiDefinitions } from "../definitions/slots.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function SlotsSection(props) {
  const {
    slots,
    componentSlots,
    slotDescriptions,
    componentName,
    title = 'api-docs.slots',
    titleHash = 'slots',
    level = 'h2',
    spreadHint,
    defaultLayout,
    layoutStorageKey
  } = props;
  const t = useTranslate();
  const [displayOption, setDisplayOption] = useApiPageOption(layoutStorageKey, defaultLayout);
  const formattedSlots = slots ?? getSlotsApiDefinitions({
    componentSlots,
    slotDescriptions,
    componentName
  });
  if (!formattedSlots || formattedSlots.length === 0) {
    return null;
  }
  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: "slots"
      })]
    }), spreadHint && /*#__PURE__*/_jsx("p", {
      dangerouslySetInnerHTML: {
        __html: spreadHint
      }
    }), displayOption === 'table' ? /*#__PURE__*/_jsx(SlotsTable, {
      slots: formattedSlots
    }) : /*#__PURE__*/_jsx(SlotsList, {
      slots: formattedSlots,
      displayOption: displayOption
    })]
  });
}