import { Bell } from 'lucide-react';
import { Search } from 'lucide-react';
import { Input } from '@/components/ui/input';

export default function Navbar() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', padding: '24px 40px', background: 'white', width: '100%', height: '75px' }}>
      <div style={{ flex: 1, display: 'flex', justifyContent: 'flex-end', marginRight: 120 }}>
        <div style={{ display: 'flex', alignItems: 'center', background: '#F2F4F8', borderRadius: '10px', padding: '8px 16px', minWidth: 350 }}>
          <Search size={20} style={{ color: '#6B7280', marginRight: 8 }} />
          <Input
            type="text"
            placeholder="Search ebooks, folders, and uploads"
            className="bg-transparent text-[#6B7280] text-base w-[250px] focus-visible:ring-0 focus-visible:ring-offset-0 border-0 focus:border-0"
          />
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
        <div style={{ position: 'relative', cursor: 'pointer' }}>
          <Bell size={22} style={{ color: '#222' }} />
          <span style={{ position: 'absolute', top: -2, right: 0, width: 9, height: 9, background: '#FF3B30', borderRadius: '50%', border: '1.5px solid white' }} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
          <div style={{ width: 32, height: 32, borderRadius: '50%', background: '#FFD600', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 600, color: '#222', fontSize: 14, position: 'relative', zIndex: 1 }}>
            D
          </div>
          <div style={{ width: 32, height: 32, borderRadius: '50%', background: 'white', border: '1px solid #E5E7EB', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, color: '#222', cursor: 'pointer', marginLeft: -8, position: 'relative', zIndex: 0 }}>
            +
          </div>
        </div>
      </div>
    </div>
  );
}