import React, { ReactNode } from 'react';
import styles from './InfoRow.module.scss';

interface InfoRowProps {
    label: ReactNode;
    value: ReactNode;
    highlight?: boolean;
    className?: string;
}

export function InfoRow({ label, value, highlight = false, className = '' }: InfoRowProps) {
    return (
        <div className={`${styles.infoRow} ${className}`}>
            <div className={styles.infoLabel}>{label}</div>
            <div className={`${styles.infoValue} ${highlight ? styles.highlight : ''}`}>
                {value}
            </div>
        </div>
    );
}

export function InfoLabel({
    children,
    className = '',
}: {
    children: ReactNode;
    className?: string;
}) {
    return <div className={`${styles.infoLabel} ${className}`}>{children}</div>;
}

export function InfoValue({
    children,
    highlight = false,
    className = '',
}: {
    children: ReactNode;
    highlight?: boolean;
    className?: string;
}) {
    return (
        <div className={`${styles.infoValue} ${highlight ? styles.highlight : ''} ${className}`}>
            {children}
        </div>
    );
}