"use client"
import { ComputerIcon } from "lucide-react"
import { useEffect, useState } from "react"
import { getNodeEnv } from "@/actions/env"
import { cn } from "@/lib/utils"

export default function Logo(props: { collapsed: boolean }) {
  const [env, setEnv] = useState<string>("")

  useEffect(() => {
    getNodeEnv().then(setEnv)
  }, [])
  return (
    <div
      className={cn(
        `h-16 flex items-center justify-between border-b px-4 shrink-0`,
        env === "production" && "bg-amber-100",
      )}
    >
      {!props.collapsed ? (
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
            <ComputerIcon className="h-4 w-4" />
          </div>
          <span className="text-xl font-bold tracking-wide">管理系统</span>
        </div>
      ) : (
        <div className="w-full flex justify-center">
          <div className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center"></div>
        </div>
      )}
    </div>
  )
}