import React, {
  memo,
  useCallback,
} from 'react';

import Spotlight from '@enact/spotlight';
import Spottable from '@enact/spotlight/Spottable';

import css from './TopButton.module.less';

const SpottableComponent = Spottable("button");

export default memo(function TopButton({ className, targetId, ...rest }) {
  const handleClick = useCallback(() => {
    targetId && Spotlight.focus(targetId);
  }, [targetId]);

  return (
    <div className={css.container}>
      <SpottableComponent
        className={className && className}
        onClick={handleClick}
        {...rest}
      />
    </div>
  );
});
