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

import { composeSx } from '@utils/components';

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

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

export const AIIconButton = ({
  variant = 'primary',
  size = 'large',
  icon = 'sparkles',
  loading = false,
  onStop,
  onClick,
  sx,
  ...rest
}: AIIconButtonProps) => (
  <>
    <GlobalStyles styles={AI_PROPERTIES} />
    <IconButton
      variant={variant}
      size={size}
      onClick={loading ? onStop : onClick}
      aria-busy={loading || undefined}
      sx={useAIVariantSx(
        variant,
        composeSx({ width: 'fit-content', flexShrink: 0 }, sx),
      )}
      {...rest}
    >
      {loading && <StopIcon />}
      {!loading && <AIIcon name={icon} />}
    </IconButton>
  </>
);

export type { AIIconButtonProps };