// * Packages
import { Link } from "@inertiajs/react";
import { route } from "ziggy-js";
// * Other
import { useTheme } from "@/back/providers/ThemeProvider";
import logoUwilCMSLight from "&/images/logos/uwil-cms.svg";
import logoUwilCMSDark from "&/images/logos/uwil-cms-dark.svg";
import logoTinyUwilCMS from "&/images/logos/uwil-cms-icon.svg";

type ApplicationLogoProps = {
    forceLight?: boolean;
    isCollapsed?: boolean;
};

/**
 * Get the logo.
 *
 * @param isCollapsed boolean
 * @param forceLight boolean
 * @param theme string
 * @return string
 */
function getLogo(isCollapsed: boolean, forceLight: boolean, theme: string) {
    if (isCollapsed) return logoTinyUwilCMS;
    if (forceLight || theme === "dark") return logoUwilCMSLight;
    return logoUwilCMSDark;
}

export default function ApplicationLogo({
    forceLight = false,
    isCollapsed = false,
}: ApplicationLogoProps) {
    const { theme } = useTheme();
    const wrapperClasses = isCollapsed ? "h-8" : "w-full max-w-[10rem] mx-auto";
    const logo = getLogo(isCollapsed, forceLight, theme);

    return (
        <Link
            href={route("back.dashboard.index")}
            className={`${wrapperClasses} rounded-md ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`}
        >
            <img
                src={logo}
                alt="UWIL CMS logo"
                className={`rounded-md w-auto mx-auto ${isCollapsed ? "h-full" : "max-h-full"}`}
            />
        </Link>
    );
}