"use client"

import * as React from "react"
import { useTheme } from "next-themes"
import { cn } from "@/lib/utils"

interface AetherLogoProps {
  className?: string
  width?: number
  height?: number
  collapsedWidth?: number
  collapsedHeight?: number
}

export function AetherLogo({ className, width = 20, height = 20, collapsedWidth, collapsedHeight }: AetherLogoProps) {
  const { resolvedTheme } = useTheme()
  const [mounted, setMounted] = React.useState(false)

  // Only render after hydration to avoid SSR mismatch
  React.useEffect(() => {
    setMounted(true)
  }, [])

  // Show a simple fallback during SSR/hydration
  if (!mounted) {
    return (
      <div className={cn("object-contain", className)} style={{ width, height }}>
        <div className="w-full h-full bg-blue-500 rounded-md animate-pulse" />
      </div>
    )
  }

  // Determine which logo to show based on theme after hydration
  const isDark = resolvedTheme === 'dark'
  const logoSrc = isDark ? '/logo-dark.png' : '/logo-light.png'
  
  return (
    <div className={cn("object-contain", className)}>
      <img
        src={logoSrc}
        alt="Aether AI Logo"
        width={width}
        height={height}
        className="group-data-[collapsible=icon]:hidden"
      />
      {collapsedWidth && collapsedHeight && (
        <img
          src={logoSrc}
          alt="Aether AI Logo"
          width={collapsedWidth}
          height={collapsedHeight}
          className="hidden group-data-[collapsible=icon]:block"
        />
      )}
    </div>
  )
}