import clsx from 'clsx'
import React from 'react'

interface Props {
  className?: string
  loading?: 'lazy' | 'eager'
  priority?: 'auto' | 'high' | 'low'
  logo?: {
    url?: string | null
    alt?: string | null
    width?: number | null
    height?: number | null
  } | null
}

export const Logo = (props: Props) => {
  const { loading = 'lazy', priority = 'low', className, logo } = props

  if (logo?.url) {
    return (
      /* eslint-disable @next/next/no-img-element */
      <img
        alt={logo.alt || 'Logo'}
        width={logo.width || 193}
        height={logo.height || 34}
        loading={loading}
        fetchPriority={priority}
        decoding="async"
        className={clsx('h-10 w-auto', className)}
        src={logo.url}
      />
    )
  }

  return (
    /* eslint-disable @next/next/no-img-element */
    <img
      alt="Truyện Tự Viết"
      width={193}
      height={193}
      loading={loading}
      fetchPriority={priority}
      decoding="async"
      className={clsx('h-10 w-auto', className)}
      src="/logo.jpeg"
    />
  )
}