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

export interface TableHeaderType {
  header?: string;
  className?: string;
  alignment?: 'left' | 'right';
  status?: 'error';
  width?: string;
}

export interface TableHeaderProps extends TableHeaderType {
  isActionHeader?: boolean;
}

const TableHeader = ({
  header,
  className,
  alignment = 'left',
  status,
  width,
  isActionHeader = false,
}: TableHeaderProps) => {
  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 (
        <TableStatusText
          text={formatMessage(messages.actionHeader)}
          className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}
        />
      );
    }

    if (header) {
      return (
        <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 (
      <div
        className="np-table-header-content np-text-body-default-bold"
        data-testid="np-table-empty-header"
      >
        &nbsp;
      </div>
    );
  };

  return (
    <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 }}
    >
      {getHeaderContent()}
    </th>
  );
};

export default TableHeader;