// * Packages
import { Link } from "@inertiajs/react";
import { route } from "ziggy-js";
// * Other
import { useTheme } from "@/back/providers/ThemeProvider";
import logoUwilSupportLight from "&/images/logos/uwil-support-light.svg";
import logoUwilSupportDark from "&/images/logos/uwil-support-dark.svg";
import logoTinyUwilSupport from "&/images/logos/uwil-support-light-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 logoTinyUwilSupport;
  if (forceLight || theme === "dark") return logoUwilSupportLight;
  return logoUwilSupportDark;
}

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={`w-auto mx-auto ${isCollapsed ? "h-full" : "max-h-full"}`}
      />
    </Link>
  );
}