import type { ReactNode } from 'react';
import { FieldHistoryLabel } from './FieldHistoryLabel';
import { isEmptyFieldValue } from '../../utils/fieldHistory/isEmptyFieldValue';

export interface FieldProps {
    label: string;
    value: ReactNode;
    path?: string;
    variant?: 'default' | 'stacked';
}

/**
 * The canonical label/value field row. Composes `FieldHistoryLabel` (which owns the
 * history-trigger decision + modal) with the value, applying the uniform empty-state: a
 * null/undefined/empty-string value renders as a muted em-dash (`isEmptyFieldValue`), while `0`
 * and `false` render as themselves. Rows are meant to sit inside a `FieldGroup` (from
 * `FieldLayout`) -- no outer border here, `FieldGroup` supplies it.
 */
export function Field({ label, value, path, variant = 'default' }: FieldProps) {
    const display = isEmptyFieldValue(value)
        ? <span className="text-muted-foreground">—</span>
        : value;

    if (variant === 'stacked') {
        return (
            <div className="flex flex-col gap-1 px-4 py-3">
                <FieldHistoryLabel label={label} path={path} className="text-xs font-medium" />
                <div className="text-sm">{display}</div>
            </div>
        );
    }

    return (
        <div className="flex items-center justify-between gap-4 px-4 py-3">
            <FieldHistoryLabel label={label} path={path} className="text-sm font-medium" />
            <div className="text-sm text-right">{display}</div>
        </div>
    );
}

export default Field;