import MuiButton from "@mui/material/Button";

export function Button({ children, className = "", variant, ...props }) {
  const { sx, ...buttonProps } = props;
  const variantClass = variant ? `button--${variant}` : "";
  const muiVariant = variant === "primary" ? "contained" : "outlined";
  const color = variant === "success" ? "success" : variant === "danger" ? "error" : "primary";
  const toneSx = getToneSx(variant);

  return (
    <MuiButton
      className={["button", variantClass, className].filter(Boolean).join(" ")}
      color={color}
      disableElevation
      sx={{ height: "var(--control-height)", minHeight: "var(--control-height)", ...toneSx, ...sx }}
      type="button"
      variant={muiVariant}
      {...buttonProps}
    >
      {children}
    </MuiButton>
  );
}

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

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

  return {};
}
