import MuiIconButton from "@mui/material/IconButton";

export function IconButton({ children, className = "", label, notice, tone, ...props }) {
  const { sx, ...buttonProps } = props;

  return (
    <MuiIconButton
      className={["icon-button", notice ? "icon-button--notice" : "", className].filter(Boolean).join(" ")}
      aria-label={label}
      sx={{
        width: "var(--control-height)",
        height: "var(--control-height)",
        padding: 0,
        border: "1px solid var(--border)",
        backgroundColor: "var(--bg-card)",
        ...getToneSx(tone),
        ...sx
      }}
      {...buttonProps}
    >
      {children}
      {notice ? <span>{notice}</span> : null}
    </MuiIconButton>
  );
}

function getToneSx(tone) {
  if (tone === "success") {
    return {
      color: "var(--success)",
      "&:hover": { borderColor: "var(--success-border-strong)", backgroundColor: "var(--success-surface)" }
    };
  }

  if (tone === "danger") {
    return {
      color: "var(--danger)",
      "&:hover": { borderColor: "var(--danger-border-strong)", backgroundColor: "var(--danger-surface)" }
    };
  }

  return {};
}
