import ApplicationLogo from '@/Components/ApplicationLogo';
import SidebarBrandTitle from '@/Components/Layout/SidebarBrandTitle';
import useBranding from '@/hooks/useBranding';
import { Link } from '@inertiajs/react';
import { forwardRef } from 'react';

function SidebarBrand({ onNavigate }, ref) {
    const { appTitle, logoUrl } = useBranding();

    return (
        <div
            ref={ref}
            className="flex shrink-0 flex-col items-center justify-center border-b border-gray-100 px-1 py-2"
        >
            <Link
                href="/"
                onClick={onNavigate}
                className="flex flex-col items-center gap-1"
            >
                <ApplicationLogo
                    logoUrl={logoUrl}
                    appTitle={appTitle}
                    className="block h-7 w-auto max-w-[3.25rem] shrink-0 object-contain"
                />
                <SidebarBrandTitle>{appTitle}</SidebarBrandTitle>
            </Link>
        </div>
    );
}

export default forwardRef(SidebarBrand);