"use client"

import { useTheme } from "next-themes"
import Image from "next/image"
import Link from "next/link"
import { useEffect, useState } from "react"

interface LogoProps {
  className?: string
  showText?: boolean
  showColor?: boolean | "dark" | "light"
}

export function Logo({ className = "block", showText = true, showColor = true }: LogoProps) {
  const { theme, systemTheme } = useTheme()
  const [mounted, setMounted] = useState(false)

  // After mounting, we can access the theme
  useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) {
    // During SSR and before hydration, we can't know the theme
    // So return a placeholder with the same dimensions
    return (
      <div className={`relative ${showText ? "w-[100px]" : "w-[50px]"} h-[50px] ${className}`}>
        <div className="absolute inset-0 bg-transparent" />
      </div>
    )
  }

  const effectiveTheme = theme == "system" ? systemTheme : theme;
  const isDark = effectiveTheme == "dark";
  const logoSrc = showText
    ? (showColor == true || showColor == theme) ? (isDark ? "/logo-dark.svg" : "/logo.svg") : "/logo-mono.svg"
    : (showColor == true || showColor == theme) ? (isDark ? "/logo-icon-dark.svg" : "/logo-icon.svg") : "/logo-icon-mono.svg";

  return (
    <Link href="/" className={`relative ${showText ? "w-[100px]" : "w-[50px]"} ${showColor && isDark ? "" : ""} h-[50px] ${className}`}>
      <Image
        src={logoSrc || "/placeholder.svg"}
        alt="TECHTONIC FAULT Logo"
        fill
        className="object-contain"
        sizes={showText ? "(max-width: 768px) 150px, 200px" : "50px"}
        priority
      />
    </Link>
  )
}