import React from 'react';
import classNames from 'classnames';
// eslint-disable-next-line import/no-unresolved
// import logo from '../assets/img/kaba.svg?name=Logo';

import doka from '../assets/img/doka.png';
import dokaSmall from '../assets/img/doka_small.png';

import '../base';
import styles from './NavigationBrand.styl';

import MediaQuery from './MediaQuery';

const classes = classNames({
  [styles.navigationbrand]: true
});

export default function NavigationBrand({ src, ...props }) {
  const logoSrc = src || doka;
  const smallLogoSrc = src || dokaSmall;

  return (
    <div className={classes}>
      {logoSrc && (
        <MediaQuery medium>
          <img alt="Logo" src={logoSrc} {...props} />
        </MediaQuery>
      )}
      {smallLogoSrc && (
        <MediaQuery smallerThan medium>
          <img alt="Logo" src={smallLogoSrc} {...props} />
        </MediaQuery>
      )}
    </div>
  );
}