import React from 'react';

export type BranchSummary = {
    id?: number;
    name?: string | null;
    code?: string | null;
    is_hq?: boolean;
} | null;

export default function BranchDetails({branch, compact = false}: { branch?: BranchSummary; compact?: boolean }): JSX.Element {
    if (!branch) {
        return <span className="text-gray-400">Unassigned</span>;
    }

    if (compact) {
        return (
            <span>
                {branch.name ?? 'Unnamed branch'}
                {branch.code ? <span className="text-gray-500"> ({branch.code})</span> : null}
                {branch.is_hq ? <span className="ml-1 text-xs font-medium text-indigo-600">HQ</span> : null}
            </span>
        );
    }

    return (
        <div>
            <div className="text-sm font-medium text-gray-800 dark:text-gray-100">{branch.name ?? 'Unnamed branch'}</div>
            <div className="text-xs text-gray-500">
                {branch.code ?? 'No code'}{branch.is_hq ? ' · HQ' : ''}
            </div>
        </div>
    );
}