import { SvgIcon, type SxProps, type Theme } from '@mui/material';

type StopIconProps = {
  /** Size in px; when omitted the size is inherited from the button slot */
  size?: number;
  sx?: SxProps<Theme>;
};

/**
 * Rounded stop square shown during the progress/stop state to cancel the action.
 * Inherits `currentColor` from the button text color.
 */
export const StopIcon = ({ size, sx }: StopIconProps) => (
  <SvgIcon
    viewBox="0 0 24 24"
    sx={{ ...(size ? { fontSize: size } : {}), ...sx }}
  >
    <rect
      x="7"
      y="7"
      width="10"
      height="10"
      rx="2.5"
      fill="currentColor"
      stroke="none"
    />
  </SvgIcon>
);