import React, { useContext } from 'react';
import { useAppConfig } from '@theorchard/suite-config';
import { AppIcon } from '@theorchard/suite-icons';
import { IdentityContext } from '@theorchard/suite-identity';
import type { MainNavLogoComponent } from '../../types';

export interface MainNavLogoProps {
    logo?: MainNavLogoComponent;
}

export function MainNavLogo({ logo }: MainNavLogoProps) {
    const { brand, appName } = useAppConfig();
    const { identity } = useContext(IdentityContext);

    if (!logo) return <AppIcon app={appName} />;

    if (React.isValidElement(logo)) return logo;

    if (typeof logo !== 'function')
        throw new Error('The MainNav "logo" needs to be a React element or a component.');

    const Logo = logo;
    return <Logo brand={brand} appName={appName} identity={identity} />;
}