import { useIntl } from 'react-intl';
import messages from './Table.messages.mjs';
import TableStatusText from './TableStatusText.mjs';
import { clsx } from 'clsx';
import { jsx } from 'react/jsx-runtime';

const TableHeader = ({
  header,
  className,
  alignment = 'left',
  status,
  width,
  isActionHeader = false
}) => {
  const {
    formatMessage
  } = useIntl();
  const getHeaderContent = () => {
    if (isActionHeader) {
      // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only
      return /*#__PURE__*/jsx(TableStatusText, {
        text: formatMessage(messages.actionHeader),
        className: `np-table-header-content${isActionHeader ? ' sr-only' : ''}`
      });
    }
    if (header) {
      return /*#__PURE__*/jsx(TableStatusText, {
        text: header,
        className: `np-table-header-content${isActionHeader ? ' sr-only' : ''}`,
        status: status,
        typography: "default-bold"
      });
    }
    // If headers are empty, we still should render empty headers to keep visual consistency
    return /*#__PURE__*/jsx("div", {
      className: "np-table-header-content np-text-body-default-bold",
      "data-testid": "np-table-empty-header",
      children: "\xA0"
    });
  };
  return /*#__PURE__*/jsx("th", {
    className: clsx('np-table-header', className, `np-table-header--${alignment}`, {
      'np-table-header--error': status === 'error',
      'np-table-header--action': isActionHeader
    }),
    style: {
      minWidth: width,
      width
    },
    children: getHeaderContent()
  });
};

export { TableHeader as default };
//# sourceMappingURL=TableHeader.mjs.map
