import React from 'react'
import { motion } from 'framer-motion'
import styles from './Header.module.css'

export default function Header() {
  return (
    <motion.header
      className={styles.header}
      initial={{ opacity: 0, y: -20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
    >
      <div className={styles.logo}>
        <img src="/logo.png" alt="Chirp logo" className={styles.logoImg} />
        <span className={styles.logoText}>chirp!</span>
      </div>
      <p className={styles.tagline}>your birdwatching companion</p>
      <div className={styles.divider} />
    </motion.header>
  )
}