import { styled, alpha } from '@mui/material/styles';
import { brandingDarkTheme as darkTheme, brandingLightTheme as lightTheme } from "../../branding/index.js";
import { useTranslate } from "../../i18n/index.js";
import { StyledTableContainer } from "./StyledTableContainer.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const StyledTable = styled('table')(({
  theme
}) => ({
  // Override docs/src/modules/components/MarkdownElement styles
  '&&': {
    display: 'table',
    width: '100%'
  },
  '& .slot-name': {
    fontFamily: theme.typography.fontFamilyCode,
    fontWeight: theme.typography.fontWeightSemiBold,
    fontSize: theme.typography.pxToRem(13),
    color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`
  },
  '& .class-name': {
    ...theme.typography.caption,
    fontFamily: theme.typography.fontFamilyCode,
    fontWeight: theme.typography.fontWeightRegular,
    color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
    padding: '1px 4px',
    borderRadius: 6,
    border: '1px solid',
    borderColor: alpha(darkTheme.palette.primary[100], 0.8),
    backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`
  },
  '& .item-default': {
    ...theme.typography.caption,
    fontFamily: theme.typography.fontFamilyCode,
    fontWeight: theme.typography.fontWeightRegular,
    color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
    padding: '1px 4px',
    borderRadius: 6,
    border: '1px solid',
    borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`,
    backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`
  },
  '& .description-column': {
    width: '40%',
    paddingRight: 8
  }
}), ({
  theme
}) => ({
  [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
    '& .slot-name': {
      color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`
    },
    '& .class-name': {
      color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
      borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
      backgroundColor: alpha(darkTheme.palette.primary[900], 0.5)
    },
    '& .item-default': {
      color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`,
      backgroundColor: `var(--muidocs-palette-grey-900, ${darkTheme.palette.grey[900]})`,
      borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`
    }
  }
}));
export default function SlotsTable(props) {
  const {
    slots
  } = props;
  const t = useTranslate();
  return /*#__PURE__*/_jsx(StyledTableContainer, {
    children: /*#__PURE__*/_jsxs(StyledTable, {
      children: [/*#__PURE__*/_jsx("thead", {
        children: /*#__PURE__*/_jsxs("tr", {
          children: [/*#__PURE__*/_jsx("th", {
            children: t('api-docs.slotName')
          }), /*#__PURE__*/_jsx("th", {
            children: t('api-docs.className')
          }), /*#__PURE__*/_jsx("th", {
            children: t('api-docs.defaultComponent')
          }), /*#__PURE__*/_jsx("th", {
            children: t('api-docs.description')
          })]
        })
      }), /*#__PURE__*/_jsx("tbody", {
        children: slots.map(params => {
          const {
            description,
            className,
            name,
            defaultValue,
            hash
          } = params;
          return /*#__PURE__*/_jsxs("tr", {
            id: hash,
            children: [/*#__PURE__*/_jsx("td", {
              className: "slot-name",
              style: {
                fontWeight: '600'
              },
              children: name
            }), /*#__PURE__*/_jsx("td", {
              className: "MuiApi-table-class-name",
              children: className && /*#__PURE__*/_jsx("span", {
                className: "class-name",
                children: `.${className}`
              })
            }), /*#__PURE__*/_jsx("td", {
              children: defaultValue && /*#__PURE__*/_jsx("code", {
                className: "item-default",
                children: defaultValue
              })
            }), /*#__PURE__*/_jsx("td", {
              className: "description-column",
              children: /*#__PURE__*/_jsx("span", {
                // eslint-disable-next-line react/no-danger
                dangerouslySetInnerHTML: {
                  __html: description || ''
                }
              })
            })]
          }, `${className}-${hash}`);
        })
      })]
    })
  });
}