'use client';

export default function OwnerBadge({
    owner,
    uploader,
    className = '',
}: {
    owner?: { id?: string | number; username?: string | null } | null;
    uploader?: string | null;
    className?: string;
}) {
    const hasOwner = !!owner?.id;

    // Prefer owner's username; fall back to uploader; ensure clean text
    const ownerName = (owner?.username ?? '').trim();
    const uploaderName = (uploader ?? '').trim();
    const name = ownerName || uploaderName || '—';

    const label = hasOwner ? 'Owner' : 'Uploader';
    const title = hasOwner ? 'Owner' : (uploaderName ? 'Original uploader' : '');

    return (
        <span
        className={`inline-flex items-center gap-2 text-xs px-2 py-1 rounded-md border border-border bg-card ${className}`}
        title={title}
        >
        <span className="opacity-70">{label}:</span>
        <span className="font-medium">{name}</span>
        </span>
    );
}