import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Server, LayoutDashboard, LogIn, UserPlus, Shield, Coins } from 'lucide-react';

const Navbar = () => {
  const navigate = useNavigate();
  // Mock kredi miktarı
  const credits = 500;

  return (
    <nav className="navbar glass" style={{
      position: 'sticky',
      top: '1rem',
      margin: '1rem auto',
      width: '95%',
      zIndex: 1000,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: '0.75rem 2rem',
    }}>
      <Link to="/" style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', textDecoration: 'none', color: 'inherit' }}>
        <div style={{
          background: 'var(--primary)',
          padding: '0.5rem',
          borderRadius: '10px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          boxShadow: '0 0 15px var(--primary-glow)'
        }}>
          <Server size={24} color="white" />
        </div>
        <span style={{ fontWeight: 'bold', fontSize: '1.25rem', letterSpacing: '-0.5px' }}>HilmanCloud</span>
      </Link>

      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
        <div className="glass" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.5rem 1rem', borderRadius: '100px', background: 'rgba(245, 158, 11, 0.1)', border: '1px solid rgba(245, 158, 11, 0.2)' }}>
          <Coins size={18} color="#f59e0b" />
          <span style={{ fontWeight: 'bold', color: '#f59e0b' }}>{credits} Kredi</span>
        </div>

        <Link to="/dashboard" className="btn btn-outline" style={{ padding: '0.5rem 1rem', fontSize: '0.9rem' }}>
          <LayoutDashboard size={18} />
          Panel
        </Link>
        <Link to="/admin" className="btn btn-outline" style={{ padding: '0.5rem 1rem', fontSize: '0.9rem' }}>
          <Shield size={18} />
          Yönetici
        </Link>
        <div style={{ width: '1px', height: '24px', background: 'var(--border)', margin: '0 0.5rem' }}></div>
        <button onClick={() => navigate('/login')} className="btn btn-outline" style={{ padding: '0.5rem 1rem', fontSize: '0.9rem' }}>
          <LogIn size={18} />
          Giriş
        </button>
        <button onClick={() => navigate('/register')} className="btn btn-primary" style={{ padding: '0.5rem 1rem', fontSize: '0.9rem' }}>
          <UserPlus size={18} />
          Kayıt Ol
        </button>
      </div>
    </nav>
  );
};

export default Navbar;