/**
 * PropRow — Reusable two-column property display row
 *
 * Used in detail pages to render a compact property table layout:
 * | Label (right-aligned) | Value | Label (right-aligned) | Value |
 *
 * Shared between detail pages that need dense key/value presentation.
 */
import React from 'react';

export function PropRow({ left, right }: {
    left: { label: string; value: React.ReactNode };
    right?: { label: string; value: React.ReactNode };
}) {
    return (
        <tr className="border-b border-gray-100 dark:border-gray-700/50">
            <td className="py-2.5 pr-3 text-right text-sm text-gray-500 dark:text-gray-400 font-medium whitespace-nowrap w-[160px]">
                {left.label}
            </td>
            <td className="py-2.5 pl-3 text-sm text-gray-900 dark:text-white" colSpan={right ? 1 : 3}>
                {left.value}
            </td>
            {right && (
                <>
                    <td className="py-2.5 pr-3 text-right text-sm text-gray-500 dark:text-gray-400 font-medium whitespace-nowrap w-[160px]">
                        {right.label}
                    </td>
                    <td className="py-2.5 pl-3 text-sm text-gray-900 dark:text-white">
                        {right.value}
                    </td>
                </>
            )}
        </tr>
    );
}