import React from 'react';
import { twMerge } from 'tailwind-merge';

interface ReferenceTextProps {
  children: React.ReactNode;
  mode?: 'normal' | 'muted';
  className?: string;
  truncate?: boolean;
}

export const ReferenceText: React.FC<ReferenceTextProps> = ({
  children,
  className,
  truncate = false,
}) => {
  // const textColor =
  //   mode === 'muted' ? REFERENCE_MUTED_COLOR : REFERENCE_WHITE_COLOR;

  const combinedClassName = twMerge(
    `font-mono text-[10px] font-light text-foreground-secondary uppercase ${truncate ? 'truncate overflow-hidden whitespace-nowrap text-ellipsis' : ''}`,
    className
  );

  return (
    <span
      className={combinedClassName}
      style={{
        margin: 0,
        padding: 0,
        lineHeight: '1rem',
        // Ensure text never expands container dimensions
        maxWidth: '100%',
        minWidth: 0,
        ...(truncate && {
          display: 'block',
          textOverflow: 'ellipsis',
        }),
      }}
    >
      {children}
    </span>
  );
};