import { Link } from "@tanstack/react-router"

import { useTheme } from "@/components/theme-provider"
import { cn } from "@/lib/utils"
import logoDark from "/assets/images/fluksio-dark.svg"
import logo from "/assets/images/fluksio-light.svg"

interface LogoProps {
  variant?: "full" | "icon" | "responsive"
  className?: string
  asLink?: boolean
}

export function Logo({
  variant = "full",
  className,
  asLink = true,
}: LogoProps) {
  const { resolvedTheme } = useTheme()
  const src = resolvedTheme === "dark" ? logoDark : logo

  // The mark and the wordmark live in the same SVG, so the collapsed sidebar
  // shows the same asset cropped to a square rather than a separate icon file.
  const content =
    variant === "responsive" ? (
      <>
        <img
          src={src}
          alt="Fluksio"
          className={cn(
            "h-6 w-auto group-data-[collapsible=icon]:hidden",
            className,
          )}
        />
        <img
          src={src}
          alt="Fluksio"
          className={cn(
            "size-5 object-contain hidden group-data-[collapsible=icon]:block",
            className,
          )}
        />
      </>
    ) : (
      <img
        src={src}
        alt="Fluksio"
        className={cn(
          variant === "full" ? "h-6 w-auto" : "size-5 object-contain",
          className,
        )}
      />
    )

  if (!asLink) {
    return content
  }

  return <Link to="/">{content}</Link>
}