import React from "react";
import { Image, Typography } from "antd";
import { useSelector } from "react-redux";

import "./ImageButton.less";

const { Text } = Typography;

export default function ImageButton({
  text,
  order,
  iconUrl,
  callback,
  events,
}) {
  const isCompact = useSelector((state) => state.taskbar.compact);

  const style = isCompact
    ? "programs__imagebutton--compact"
    : "programs__imagebutton";

  return (
    <div
      style={{ order }}
      onClick={callback}
      role="button"
      tabIndex={0}
      onKeyDown={() => {}}
      // eslint-disable-next-line react/jsx-props-no-spreading
      {...events}
      className={style}
    >
      <Image preview={false} src={iconUrl} />
      <Text>{text}</Text>
    </div>
  );
}