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

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

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

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

export type { AIFabProps };