import { classNames } from '@/lib/components/classNames';
import type { HTMLAttributes, ReactNode } from 'react';
import styles from './BidiText.module.css';

interface BidiTextProps extends Omit<HTMLAttributes<HTMLElement>, 'dir'> {
  children: ReactNode;
  direction?: 'ltr' | 'rtl' | 'auto';
  noWrap?: boolean;
}

export function BidiText({
  children,
  direction = 'ltr',
  noWrap = true,
  className,
  ...props
}: BidiTextProps) {
  return (
    <bdi dir={direction} className={classNames(noWrap && styles.noWrap, className)} {...props}>
      {children}
    </bdi>
  );
}
