import MuiButton, { type ButtonProps } from "@mui/material/Button";
import type { ElementType } from "react";

/** App Button: defaults to the brand primary contained style.
 *  Accepts `component` + any extra props the component requires
 *  (e.g. `component={RouterLink} to="/foo"` or `component="a" href="…"`).
 */
export default function Button<C extends ElementType = "button">({
  sx,
  ...props
}: ButtonProps<C, { component?: C }>) {
  return (
    <MuiButton
      variant="contained"
      color="primary"
      {...props}
      // Keep labels on one line and at their natural width — in flex rows MUI's
      // default flexShrink:1 squeezes a button below its content, so the label
      // either wrapped to two lines or (with nowrap) overflowed its padding and
      // hit the edges. nowrap + flexShrink:0 keeps buttons crisp. Caller sx wins.
      sx={[
        { whiteSpace: "nowrap", flexShrink: 0 },
        ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
      ]}
    />
  );
}
