import React from "react";

import Button, { ButtonProps } from "@mui/material/Button";

import { GRADIENT_CTA } from "../theme";

// Static, not derived from theme.vars.customShadows: an inline sx callback always executes
// against whatever theme is in context, including MUI's bare default theme when a component
// renders without this app's ThemeProvider (every test in this repo does exactly that -- no
// test wraps components in one), and the default theme has no `.vars`. theme.components
// styleOverrides (e.g. MuiCard) don't have this problem since they only run when this app's
// real theme is actually provided, but inline sx isn't gated that way.
const GRADIENT_SHADOW = "0px 4px 14px -4px rgba(99,102,241,0.45)";

/**
 * The mockup's gradient AI/primary-action pill ("Tailor my CV for this role", "See the
 * interface tour"). Reserve this for the single most important AI-assist or hero action on a
 * screen -- everything else stays a plain contained/outlined Button, or the gradient stops
 * reading as a signal and becomes wallpaper.
 */
export default function GradientButton({ sx, disabled, ...props }: ButtonProps) {
  return (
    <Button
      variant="contained"
      disableElevation
      disabled={disabled}
      sx={[
        {
          background: disabled ? undefined : GRADIENT_CTA,
          color: disabled ? undefined : "#fff",
          boxShadow: disabled ? undefined : GRADIENT_SHADOW,
          "&:hover": disabled
            ? undefined
            : { background: GRADIENT_CTA, filter: "brightness(1.06)", boxShadow: GRADIENT_SHADOW },
        },
        ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
      ]}
      {...props}
    />
  );
}