import { IconX } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import { useTheme } from '@material-hu/mui/styles';

type ClosePlayerButtonProps = {
  onClick: () => void;
};

const ClosePlayerButton = (props: ClosePlayerButtonProps) => {
  const { onClick } = props;
  const theme = useTheme();

  return (
    <IconButton
      sx={{
        color: theme.palette.new.text.neutral.default,
        backgroundColor: theme.palette.new.background.elements.grey,
        borderRadius: '100%',
      }}
      onClick={onClick}
    >
      <IconX />
    </IconButton>
  );
};

export default ClosePlayerButton;