import Link from 'next/link';
import { motion } from 'framer-motion';

export default function GameHeader({ resources }) {
  return (
    <header className="bg-space-dark/80 backdrop-blur-sm p-4 sticky top-0 z-50 border-b border-space-blue/30">
      <div className="container mx-auto flex justify-between items-center">
        <div className="flex items-center space-x-4">
          <h1 className="text-2xl font-bold text-space-gold">Space Empire</h1>
          <Link href="https://huggingface.co/spaces/akhaliq/anycoder" passHref>
            <span className="text-xs text-space-blue hover:text-space-gold transition-colors cursor-pointer">
              Built with anycoder
            </span>
          </Link>
        </div>

        <div className="flex items-center space-x-6">
          {resources.map((resource, index) => (
            <motion.div
              key={resource.name}
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: index * 0.1 }}
              className="flex items-center space-x-2"
            >
              <div className="w-8 h-8 bg-space-blue/50 rounded-full flex items-center justify-center">
                <resource.icon className="text-space-gold" size={16} />
              </div>
              <div className="text-right">
                <div className="text-xs text-space-blue/70">{resource.name}</div>
                <div className="text-sm font-bold text-space-gold">
                  {resource.amount.toLocaleString()}
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </header>
  );
}