import React from "react";

import classNames from "classnames";

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

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

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

export default function THeader({ title, className, onBackButton, onClick }) {
  return (
    <Container className={classNames(css.tHeader, className)}>
      {onBackButton && <button className={css.button} onClick={onClick} />}
      <div className={css.title}>{title}</div>
    </Container>
  );
}
