import React from 'react';
import { motion } from 'framer-motion';
import '../styles/glassmorphism.css';

function Header({ sentimentFilter, onSentimentFilter }) {
  return (
    <motion.header
      initial={{ opacity: 0, y: -20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
      style={{
        position: 'relative',
        height: '60px',
        background: 'rgba(10, 25, 41, 0.95)',
        backdropFilter: 'blur(16px)',
        borderBottom: '1px solid rgba(0, 217, 255, 0.2)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '0 32px',
        zIndex: 100,
        boxShadow: '0 4px 24px rgba(0, 0, 0, 0.3)'
      }}
    >
      {/* Logo and Title */}
      <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
        <motion.div
          style={{
            width: '40px',
            height: '40px',
            background: 'linear-gradient(135deg, #00d9ff, #00ff88)',
            borderRadius: '10px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: '24px',
            boxShadow: '0 0 20px rgba(0, 217, 255, 0.4)'
          }}
          whileHover={{ scale: 1.05, rotate: 5 }}
          whileTap={{ scale: 0.95 }}
        >
          🌍
        </motion.div>

        <div>
          <h1 style={{
            margin: 0,
            fontFamily: 'Outfit, sans-serif',
            fontSize: '24px',
            fontWeight: 700,
            background: 'linear-gradient(135deg, #00d9ff, #00ff88)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
            letterSpacing: '-0.5px'
          }}>
            Locate the News
          </h1>
          <p style={{
            margin: 0,
            fontFamily: 'Inter, sans-serif',
            fontSize: '11px',
            color: 'rgba(255, 255, 255, 0.5)',
            letterSpacing: '0.5px'
          }}>
            Discover News on the Map
          </p>
        </div>
      </div>

      {/* Right Side - Sentiment Filters */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        gap: '24px',
        fontSize: '13px',
        color: 'rgba(255, 255, 255, 0.6)'
      }}>
        {/* Crisis Filter */}
        <motion.div
          onClick={() => onSentimentFilter('negative')}
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '8px',
            padding: '8px 16px',
            background: 'rgba(255, 51, 102, 0.1)',
            border: '1px solid rgba(255, 51, 102, 0.3)',
            borderRadius: '8px',
            cursor: 'pointer',
            opacity: !sentimentFilter || sentimentFilter === 'negative' ? 1 : 0.4,
            transform: sentimentFilter === 'negative' ? 'scale(1.05)' : 'scale(1)',
            transition: 'all 0.3s ease',
            boxShadow: sentimentFilter === 'negative' ? '0 0 20px rgba(255, 51, 102, 0.4)' : 'none'
          }}
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
        >
          <span style={{ fontSize: '16px' }}>🔴</span>
          <span style={{ color: '#ff3366', fontWeight: 600 }}>Crisis</span>
        </motion.div>

        {/* Neutral Filter */}
        <motion.div
          onClick={() => onSentimentFilter('neutral')}
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '8px',
            padding: '8px 16px',
            background: 'rgba(0, 217, 255, 0.1)',
            border: '1px solid rgba(0, 217, 255, 0.3)',
            borderRadius: '8px',
            cursor: 'pointer',
            opacity: !sentimentFilter || sentimentFilter === 'neutral' ? 1 : 0.4,
            transform: sentimentFilter === 'neutral' ? 'scale(1.05)' : 'scale(1)',
            transition: 'all 0.3s ease',
            boxShadow: sentimentFilter === 'neutral' ? '0 0 20px rgba(0, 217, 255, 0.4)' : 'none'
          }}
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
        >
          <span style={{ fontSize: '16px' }}>🔵</span>
          <span style={{ color: '#00d9ff', fontWeight: 600 }}>Neutral</span>
        </motion.div>

        {/* Positive Filter */}
        <motion.div
          onClick={() => onSentimentFilter('positive')}
          style={{
            display: 'flex',
            alignItems: 'center',
            gap: '8px',
            padding: '8px 16px',
            background: 'rgba(0, 255, 136, 0.1)',
            border: '1px solid rgba(0, 255, 136, 0.3)',
            borderRadius: '8px',
            cursor: 'pointer',
            opacity: !sentimentFilter || sentimentFilter === 'positive' ? 1 : 0.4,
            transform: sentimentFilter === 'positive' ? 'scale(1.05)' : 'scale(1)',
            transition: 'all 0.3s ease',
            boxShadow: sentimentFilter === 'positive' ? '0 0 20px rgba(0, 255, 136, 0.4)' : 'none'
          }}
          whileHover={{ scale: 1.05 }}
          whileTap={{ scale: 0.95 }}
        >
          <span style={{ fontSize: '16px' }}>🟢</span>
          <span style={{ color: '#00ff88', fontWeight: 600 }}>Positive</span>
        </motion.div>
      </div>
    </motion.header>
  );
}

export default Header;