import type { LucideIcon } from 'lucide-react';
import type { ReactNode } from 'react';

interface InfoFieldProps {
    icon?: LucideIcon;
    label: string;
    value: ReactNode;
    className?: string;
}

/**
 * Reusable info field component with optional icon
 * Eliminates repetitive field rendering pattern
 */
export default function InfoField({
    icon: Icon,
    label,
    value,
    className = '',
}: InfoFieldProps) {
    return (
        <div className={`flex items-center gap-3 ${className}`}>
            {Icon && <Icon className="mt-0.5 h-5 w-5 text-muted-foreground" />}
            {!Icon && <div className="mt-0.5 h-5 w-5" />}
            <div className="flex-1">
                <p className="text-sm text-muted-foreground">{label}</p>
                <p className="font-medium">{value}</p>
            </div>
        </div>
    );
}