"use client";
import React from "react";
import DashCodeLogo from "./dascode-logo";
import { Link } from "@/i18n/routing";
import { useConfig } from "@/hooks/use-config";
import { useMenuHoverConfig } from "@/hooks/use-menu-hover";
import { useMediaQuery } from "@/hooks/use-media-query";

const Logo = () => {
  const [config] = useConfig();
  const [hoverConfig] = useMenuHoverConfig();
  const { hovered } = hoverConfig;
  const isDesktop = useMediaQuery("(min-width: 1280px)");

  if (config.sidebar === "compact") {
    return (
      <Link
        href="/dashboard/analytics"
        className="flex gap-2 items-center   justify-center    "
      >
        <DashCodeLogo className="  text-default-900 h-8 w-8 [&>path:nth-child(3)]:text-background [&>path:nth-child(2)]:text-background" />
      </Link>
    );
  }
  if (config.sidebar === "two-column" || !isDesktop) return null;

  return (
    <Link href="/" className="flex items-center">
      {/* <DashCodeLogo className="  text-default-900 h-8 w-8 [&>path:nth-child(3)]:text-background [&>path:nth-child(2)]:text-background" />
      {(!config?.collapsed || hovered) && (
        <h1 className="text-xl font-semibold text-default-900 ">D</h1>
      )} */}
      <img
        className="w-100"
        src="/../images/all-img/mediahub-logo.png"
        alt="logo"
        width={150}
      />
    </Link>
  );
};

export default Logo;