import classNames from "classnames";
import React from "react";
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
import css from "./TBody.module.less";
import { SpotlightIds } from "../../utils/SpotlightIds";
import TScroller from "../TScroller/TScroller";

const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused", preserveId: true },
  "div"
);

export default function TBody({
  children,
  className,
  spotlightId = SpotlightIds.TBODY,
  scrollable = true,
  ...rest
}) {
  return (
    <Container
      spotlightId={spotlightId}
      {...rest}
      className={classNames(css.tBody, className)}
    >
      {scrollable ? (
        <TScroller className={css.tScroller}>{children}</TScroller>
      ) : (
        { children }
      )}
    </Container>
  );
}
