import React from "react";

import classNames from "classnames";

import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";

import { SpotlightIds } from "../../utils/SpotlightIds";
import TScroller from "../TScroller/TScroller";
import css from "./TBody.module.less";

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

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