'use client';

import { observer } from 'mobx-react-lite';

import { TYPING_PHRASES, useTypingAnimation } from '../utils/utils';

interface TypingAnimationProps {
  phrases: typeof TYPING_PHRASES;
}

const TypingAnimation: React.FC<TypingAnimationProps> = observer(
  ({ phrases }) => {
    const { displayText, currentPhraseIndex, showCursor } =
      useTypingAnimation(phrases);

    return (
      <div>
        <h1
          className={[
            'text-center font-sans text-[48px] leading-[44px] font-medium tracking-[-0.96px] text-white',
            'mx-auto px-[20px] transition-all duration-300 md:px-0 md:text-7xl md:leading-[72px]',
            phrases[currentPhraseIndex]?.className || '',
          ].join(' ')}
        >
          {displayText}
          <span
            className='ml-[10px] inline-block h-[44px] w-[2px] bg-foreground-primary align-middle transition-opacity duration-100 md:h-[64px]'
            style={{ opacity: showCursor ? 1 : 0 }}
          />
        </h1>
      </div>
    );
  }
);

export default TypingAnimation;