'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;
  to?: string;
}

export  function Logo({ className = "", size = "h-9", to }: Props) {
  const { logoDark, logoLight } = useApp();
  return (
    <Link href={to ?? "/"} className={clsx(className, "flex")}>
      {/* <BrandLogo className="h-10 w-auto mx-auto" /> */}
      {/* {appConfiguration?.branding.logo ? (
        <Fragment>
          <img
            className={clsx(size, "mx-auto hidden w-auto dark:block")}
            src={appConfiguration.branding.logoDarkMode ?? appConfiguration.branding.logo}
            alt="Logo"
          />
          <img className={clsx(size, "mx-auto w-auto dark:hidden")} src={appConfiguration.branding.logo} alt="Logo" />
        </Fragment>
      ) : ( */}
      <Fragment>
        <Image className={clsx(size, "mx-auto hidden w-auto dark:block")} src={logoDark} alt="Logo" />
        <Image className={clsx(size, "mx-auto w-auto dark:hidden")} src={logoLight} alt="Logo" />
      </Fragment>
      
    </Link>
  );
}