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

interface Props {
  className?: string
  loading?: 'lazy' | 'eager'
  priority?: 'auto' | 'high' | 'low'
  variant?: 'blue' | 'white'
}

export const Logo = (props: Props) => {
  const {
    loading: loadingFromProps,
    priority: priorityFromProps,
    className,
    variant = 'blue',
  } = props

  const loading = loadingFromProps || 'lazy'
  const priority = priorityFromProps || 'low'

  const src =
    variant === 'white' ? '/media/fd-logo-white.svg' : '/media/fd-logo-blue.svg'

  return (
    <img
      alt="Fiber Direkt"
      loading={loading}
      fetchPriority={priority}
      decoding="async"
      className={clsx(className)}
      style={{ width: '150px', height: 'auto' }}
      src={src}
      width={150}
      height={88}
    />
  )
}