import type { FC } from 'react';
import React from 'react';
import { useAppConfig } from '@theorchard/suite-config';
import { Link } from 'react-router-dom';
import { MainNavLink } from '../mainNav/mainNavLink';
import { BetaBadge } from './betaBadge';
import { MainNavLogo } from './mainNavLogo';
import type { MainNavLogoComponent } from '../../types';

const CLASS_NAME = 'MainNavHeader';

export interface MainNavHeaderProps {
    beta?: boolean;
    title?: string;
    logo?: MainNavLogoComponent;
    asMainLink?: boolean;
}

export const MainNavHeader: FC<MainNavHeaderProps> = ({ logo, title, beta, asMainLink }) => {
    const { appName } = useAppConfig();
    const appTitle = title ?? appName;

    return (
        <div className={CLASS_NAME}>
            {asMainLink ? (
                <MainNavLink
                    className={`${CLASS_NAME}-link`}
                    icon={<MainNavLogo logo={logo} />}
                    path="/"
                    beta={beta}
                    title={appTitle}
                />
            ) : (
                <Link className={`${CLASS_NAME}-title`} to="/">
                    <span className={`${CLASS_NAME}-logo`}>
                        <MainNavLogo logo={logo} />
                    </span>
                    <span className={`${CLASS_NAME}-title-text`}>{appTitle}</span>
                    {beta && <BetaBadge className={`${CLASS_NAME}-beta`} />}
                </Link>
            )}
        </div>
    );
};