import { LogOut, Bell } from 'lucide-react'
import { logout } from '@/lib/auth'
import { redirect } from 'next/navigation'

export function Header() {
  return (
    <header className="h-16 bg-white/80 backdrop-blur-md border-b border-slate-200/60 flex items-center justify-between px-6 sticky top-0 z-10">
      <div className="flex items-center text-sm text-slate-500 font-medium">
        Hoş Geldiniz, <span className="text-slate-800 font-bold ml-1">Admin</span>
      </div>
      
      <div className="flex items-center gap-4">
        <button className="p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-50 rounded-full transition-colors relative">
          <Bell size={20} />
          <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-blue-500 rounded-full border-2 border-white"></span>
        </button>
        <div className="w-px h-6 bg-slate-200"></div>
        <form action={async () => {
          'use server'
          await logout()
          redirect('/admin/login')
        }}>
          <button 
            type="submit"
            className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-slate-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
          >
            <LogOut size={18} />
            <span className="hidden sm:inline">Çıkış Yap</span>
          </button>
        </form>
      </div>
    </header>
  )
}