import * as React from 'react';

import { Paragraph, useTranslations } from '@shoptet/ui-core-web';

import { isTruthyNativeHtmlStructure } from '../../../utils/isTruthyNativeHtmlStructure';
import { getTypographyProps } from '../../Typography/getTypographyProps';
import { TableCellEmpty } from '../TableCell/TableCellEmpty';
import { TableRow } from '../TableRow/TableRow';

import { dictionary } from './dictionary';

type TableBodyEmptyProps = React.PropsWithChildren<{
  colspan: number;
}>;

export const TableBodyEmpty: React.FC<TableBodyEmptyProps> = ({ children, colspan, ...rest }) => {
  rest satisfies Record<PropertyKey, never>;

  const translations = useTranslations(dictionary);

  return (
    <TableRow>
      <TableCellEmpty colspan={colspan}>
        {children ? (
          isTruthyNativeHtmlStructure(children) ? (
            <Paragraph {...getTypographyProps({ align: 'center' })}>{children}</Paragraph>
          ) : (
            children
          )
        ) : (
          <Paragraph {...getTypographyProps({ align: 'center' })}>{translations.noEntriesFound}</Paragraph>
        )}
      </TableCellEmpty>
    </TableRow>
  );
};