"use client";
import React from "react";
import { Link } from "@/components/navigation";
import DashCodeLogo from "@/components/dascode-logo";
import { useConfig } from "@/hooks/use-config";
import { useMediaQuery } from "@/hooks/use-media-query";

const HeaderLogo = () => {
  const [config] = useConfig();

  const isDesktop = useMediaQuery("(min-width: 1280px)");

  return config.layout === "horizontal" ? (
    <Link href="/" className="flex gap-2 items-center    ">
      <img
        className="w-100"
        src="/../images/all-img/mediahub-logo.png"
        alt="logo"
        width={150}
      />
    </Link>
  ) : (
    !isDesktop && (
      <Link href="/" className="flex gap-2 items-center    ">
        <img
          className="w-100"
          src="/../images/all-img/mediahub-logo.png"
          alt="logo"
          width={150}
        />
      </Link>
    )
  );
};

export default HeaderLogo;