import type {CSSProperties} from 'react';

export function HeroTagline({text,direction='rtl',paused=false,reducedMotion=false}:{
  text:string;
  direction?:'rtl'|'ltr';
  paused?:boolean;
  reducedMotion?:boolean;
}) {
  const style={
    '--type-play-state':paused?'paused':'running',
  } as CSSProperties;

  // Fade the intact phrase without breaking joined Persian letters.
  return <span key={text} className="hero-typewriter" dir={direction} style={style} data-reduced-motion={reducedMotion}>
    <span className="hero-typewriter-text">{text}</span>
  </span>;
}