header.js

import taskmatelogo from './taskmatelogo.png'
import React from 'react'
import './header.css'
import darkmode from'./darkmode.png'
import lightmode from './lightmode.png'
import user from './user.png'




function Header({theme, settheme}) {


    const lighttheme=()=>{
        settheme("light")
    }

    const darktheme=()=>{
        settheme("dark")
    }



return (
<header data-theme={theme}>
    <span className="logo">
        <img src={taskmatelogo} alt="TaskMate logo" />
        <span>TaskMate</span>
    </span>
    <nav>
        <a href="/tasks">Tasks</a>
        <a href="/about">About</a>
      </nav>
    <span className="themeSelector">
    {theme === "light" ? (
              <img
                src={lightmode}
                alt="Light mode icon"
                onClick={darktheme}
              />
            ) : (
              <img
                src={darkmode}
                alt="Dark mode icon"
                onClick={lighttheme}
              />
            )}
    </span>
    <img className='user' src={user} alt="user avatar"/>
</header>
  )
}

export default Header