"use client";

import React from "react";
import Image from "next/image";
import { useTheme } from "next-themes";

import { cn } from "@/lib/utils";

import { Skeleton } from "./ui/skeleton";

function Logo({ className }: { className?: string }) {
  const { theme } = useTheme();

  if (!theme) return <Skeleton className={cn("w-[80%] h-16", className)} />;

  return (
    <div className={cn("w-[80%] relative h-16", className)}>
      <Image
        src={`https://assets.kabila.app/logos/main/${theme === "dark" ? "light" : "dark"}.svg`}
        alt="Kabi Logo"
        className="object-contain"
        fill
      />
    </div>
  );
}

export default Logo;