import { useCommerce } from '@framework'
import Image from 'next/image'
import { useUI } from '../context'

const DefaultLogo = ({ className = '', ...props }) => (
  <svg
    width="32"
    height="32"
    viewBox="0 0 32 32"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    className={className}
    {...props}
  >
    <rect width="100%" height="100%" rx="16" fill="var(--secondary)" />
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
      fill="var(--primary)"
    />
  </svg>
)

const Logo = ({ className = '', ...props }) => {
  const { theme } = useUI()
  console.log(theme)
  // @ts-ignore
  const { brand = {} } = useCommerce()
  const { Logo = DefaultLogo } = brand

  if (theme.logoSrc && theme.logoAlt) {
    return (
      <Image
        src={theme.logoSrc}
        alt={theme.logoAlt}
        {...props}
        height={32}
        width={32}
      />
    )
  }

  return <Logo />
}

export default Logo