import React from 'react';
import { Link } from 'react-router-dom';
import styles from '../../styles/Logo.module.scss';

const Logo = () => {
  return (
    <Link to="/">
      <section className={styles.logoContainer}>
        <div className={styles.logo} id='logo-start'>
          <picture>
            <source
              srcSet='/runosaari-logo_small.jpg'
              media='(max-width: 600px)'
            />
            <source srcSet='/runosaari-logo.jpg' />
            <img
              src='/runosaari-logo.jpg'
              alt='Runosaari logo'
              className={styles.logoImage}
            />
          </picture>
          <div className={styles.logoCredits}>
            <div>@Sanna Hukkanen</div>
          </div>
        </div>
      </section>
    </Link>
  );
};

export default Logo;
