'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 LogoLightMode({ className = "", size = "h-9", to }: Props) {
  const { 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 w-auto")} src={appConfiguration.branding.logo} alt="Logo" />
        </Fragment>
      ) : ( */}
      <Fragment>
        <Image className={clsx(size, "mx-auto w-auto")} src={logoLight} alt="Logo" />
      </Fragment>
      
    </Link>
  );
}