import { usePage } from '@inertiajs/react';
import AppLogoIcon from '@/components/app-logo-icon';

type PageProps = {
    appSettings?: {
        shop_name: string;
        logo_url: string | null;
    };
};

export default function AppLogo() {
    const { appSettings } = usePage<PageProps>().props;
    const shopName = appSettings?.shop_name ?? 'Laravel Starter Kit';

    return (
        <>
            <div className="flex aspect-square size-12 items-center justify-center rounded-md text-sidebar-primary-foreground">
                {appSettings?.logo_url ? (
                    <img
                        src={appSettings.logo_url}
                        alt={shopName}
                        className="size-12 rounded object-contain"
                    />
                ) : (
                    <AppLogoIcon className="size-5 fill-current text-white dark:text-black" />
                )}
            </div>
            <div className="ml-1 grid flex-1 text-left text-sm">
                <span className="mb-0.5 truncate leading-tight font-semibold">
                    {shopName}
                </span>
            </div>
        </>
    );
}