import { GlobalStyles } from '@mui/material';

import Button from '../../../Buttons/Button';
import { AIIcon } from '../../shared/AIIcon';
import { AI_PROPERTIES } from '../../shared/constants';
import { StopIcon } from '../../shared/StopIcon';
import { useAIVariantSx } from '../../shared/useAIVariantSx';

import { type AIButtonProps } from './types';

export const AIButton = ({
  variant = 'primary',
  size = 'large',
  icon = 'sparkles',
  loading = false,
  onStop,
  onClick,
  children,
  sx,
  ...rest
}: AIButtonProps) => (
  <>
    <GlobalStyles styles={AI_PROPERTIES} />
    <Button
      variant={variant}
      size={size}
      onClick={loading ? onStop : onClick}
      startIcon={!loading && <AIIcon name={icon} />}
      aria-busy={loading || undefined}
      sx={useAIVariantSx(variant, sx)}
      {...rest}
    >
      {loading && <StopIcon />}
      {!loading && children}
    </Button>
  </>
);

export type { AIButtonProps };