import styles from './TableRowCell.module.scss';

export interface TableRowCellProps {
  /** Primary text content */
  text: string;
  /** Optional metadata text displayed below primary text */
  metadata?: string;
  /** Whether to show the metadata line */
  showMeta?: boolean;
  /** Cell type: Primary (main content) or Secondary (right-aligned value) */
  type?: 'primary' | 'secondary';
  /** Additional CSS classes */
  className?: string;
}

export const TableRowCell = ({
  text,
  metadata,
  showMeta = false,
  type = 'primary',
  className = '',
}: TableRowCellProps) => {
  return (
    <div className={`${styles.cell} ${styles[type]} ${className}`}>
      <div className={styles.content}>
        <span className={styles.text}>{text}</span>
        {type === 'primary' && showMeta && metadata && (
          <span className={styles.metadata}>{metadata}</span>
        )}
      </div>
    </div>
  );
};