import React, { HTMLProps, useContext } from "react";
import classNames from "classnames";
import { bem } from "../../utilities/bem";
import TableRow from "./TableRow";
import TableCell from "./TableCell";
import TableContext from "./TableContext";

const cn = "TableBody";

const TableBody = ({
  className,
  children,
  ...rest
}: HTMLProps<HTMLTableSectionElement>) => {
  const { noResults } = useContext(TableContext);

  return (
    <tbody className={classNames(bem(cn), className)} {...rest}>
      {noResults ? (
        <TableRow className="block w-full">
          <TableCell>No results</TableCell>
        </TableRow>
      ) : (
        children
      )}
    </tbody>
  );
};

export default TableBody;