import React from 'react';
import { Box, as, toRem } from 'folds';
import { useSetting } from '../../state/hooks/settings';
import { settingsAtom } from '../../state/settings';
import * as css from './TypingIndicator.css';

export type TypingIndicatorProps = {
  size?: '300' | '400';
  disableAnimation?: boolean;
};

export const TypingIndicator = as<'div', TypingIndicatorProps>(
  ({ size, disableAnimation, style, ...props }, ref) => {
    const [lotusTerminal] = useSetting(settingsAtom, 'lotusTerminal');
    return (
      <Box
        as="span"
        alignItems="Center"
        shrink="No"
        style={{
          gap: toRem(size === '300' ? 1 : 2),
          color: lotusTerminal ? 'var(--lt-accent-orange)' : undefined,
          ...style,
        }}
        {...props}
        ref={ref}
      >
        <span className={css.TypingDot({ size, index: '0', animated: !disableAnimation })} />
        <span className={css.TypingDot({ size, index: '1', animated: !disableAnimation })} />
        <span className={css.TypingDot({ size, index: '2', animated: !disableAnimation })} />
      </Box>
    );
  },
);
