'use client';

import clsx from "clsx";

import { Fragment } from "react";
import Link from "next/link";
import React from "react";
import Image from "next/image";
import { useApp } from "../../hooks";

interface Props {
  className?: string;
  size?: string;
}

export  function Icon({ className = "", size = "h-9" }: Props) {
  //const { appConfiguration } = useRootData();
  const {iconDark, iconLight} = useApp();
  return (
    <Link href="/" className={clsx(className, "flex")}>
     {/*  {appConfiguration?.branding.icon ? (
        <Fragment>
          <img className={clsx(size, "hidden w-auto dark:block")} src={appConfiguration.branding.iconDarkMode ?? appConfiguration.branding.icon} alt="Icon" />
          <img className={clsx(size, "w-auto dark:hidden")} src={appConfiguration.branding.icon} alt="Icon" />
        </Fragment>
      ) :  */}(
        <Fragment>
          <Image className={clsx(size, "hidden w-auto dark:block")} src={iconDark} alt="Logo" />
          <Image className={clsx(size, "w-auto dark:hidden")} src={iconLight} alt="Logo" />
        </Fragment>
      )
    </Link>
  );
}