import React from 'react';
import './header.css';
import logo from '../../assets/logo.png';
import { Link as RouterLink } from 'react-router-dom';
import { Link as ScrollLink } from 'react-scroll';

const Header = () => {
  return (
    <header className='header'>
      <div className='logo'>
        <a href="/">
          <img src={logo} alt="logo" />
          <svg
            width="25px"
            height="25px"
            viewBox="0 0 24 24"
            fill="#f5f5f5"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M3 12H21M3 6H21M3 18H21"
              stroke="#f5f5f5"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </a>
      </div>

      <nav>
        <ul>
          <li>Inicio</li>
          <li>
            <ScrollLink
              to="spa-section" 
              smooth={true}    
              duration={500}  
            >
              Servicios
            </ScrollLink>
          </li>
          <li>
            <RouterLink to='/Servicios-dentista'>Dentista</RouterLink>
          </li>
          <li>
            <RouterLink to='/Servicios-spa'>SPA</RouterLink>
          </li>
        </ul>
      </nav>

      <div className='buttton'>
        <RouterLink to='/login'>
          <h4>Acceder</h4>
        </RouterLink>
      </div>
    </header>
  );
};

export default Header;