import { CountUp } from './CountUp.jsx';
import { ArrowPathIcon, HomeIcon } from '@heroicons/react/24/outline';
import { motion, useReducedMotion } from 'framer-motion';
import { useNavigate } from 'react-router-dom';
import logo from '../assets/logolang.png';
import { Button } from './Button.jsx';

export function Header({ count, title = 'Kenteken Generator', onRestart, onHome }) {
  const navigate = useNavigate();
  const reduceMotion = useReducedMotion();
  return (
    <motion.header
      className="header"
      initial={reduceMotion ? { opacity: 1 } : { y: -20, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: reduceMotion ? 0 : 0.28 }}
    >
      <div className="header-inner">
        <div
          className="flex flex-col items-center cursor-pointer"
          onClick={() => navigate('/generate')}
        >
          <motion.img
            src={logo}
            alt="CarKiddo"
            className="h-10 w-auto"
            whileHover={reduceMotion ? undefined : { rotate: 2, y: -1 }}
            transition={{ type: 'spring', stiffness: 300, damping: 20 }}
          />
          <motion.div
            className="header-title mt-1"
            initial={reduceMotion ? false : { opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.3 }}
          >
            {title}
          </motion.div>
        </div>
        <div className="flex items-center gap-3">
          <div className="subtle flex items-center gap-1 text-sm">
            🚗 <CountUp value={count} /> kinderauto’s
          </div>
          {onHome && (
            <Button
              type="button"
              variant="ghost"
              className="px-3 py-1.5 text-xs flex items-center gap-1"
              onClick={onHome}
            >
              <HomeIcon className="w-4 h-4" />
              Home
            </Button>
          )}
          {onRestart && (
            <Button
              type="button"
              variant="ghost"
              className="px-3 py-1.5 text-xs flex items-center gap-1"
              onClick={onRestart}
            >
              <ArrowPathIcon className="w-4 h-4" />
              Opnieuw
            </Button>
          )}
        </div>
      </div>
    </motion.header>
  );
}