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

import LogoSvg from '@/assets/Logo-1.svg';

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

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

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

  return (
    /* eslint-disable @next/next/no-img-element */
    <img
      alt='Suno Logo'
      width={606}
      height={149}
      loading={loading}
      fetchPriority={priority}
      decoding='async'
      className={clsx('h-auto w-full max-w-[9.375rem]', className)}
      src={LogoSvg.src || LogoSvg}
    />
  );
};