import React from "react";

import classNames from "classnames";

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

import css from "./THeader.module.less";

const Container = SpotlightContainerDecorator(
  { enterTo: "last-focused" },
  "div"
);
const SpottableComponent = Spottable("button");
export default function THeader({ title, className, onBackButton, onClick }) {
  return (
    <Container className={classNames(css.tHeader, className)}>
      {onBackButton && (
        <SpottableComponent className={css.button} onClick={onClick} />
      )}
      <div className={css.title}>{title}</div>
    </Container>
  );
}