'use client'

import React from 'react'
import Image from 'next/image'
import { Menu, Bell } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'

interface HeaderProps {
  title: string
  userName: string
  userGrade?: string
  userAvatar?: string
  onMenuClick?: () => void
  notificationCount?: number
}

export function Header({
  title,
  userName,
  userGrade,
  userAvatar,
  onMenuClick,
  notificationCount = 0,
}: HeaderProps) {
  const initials = userName
    .split(' ')
    .map((n) => n[0])
    .join('')
    .toUpperCase()
    .slice(0, 2)

  return (
    <header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-gray-200 bg-white px-4 shadow-sm lg:px-6">
      {/* Left: Mobile menu + Title */}
      <div className="flex items-center gap-3">
        <Button
          variant="ghost"
          size="icon"
          className="lg:hidden"
          onClick={onMenuClick}
          aria-label="Toggle menu"
        >
          <Menu className="h-5 w-5" />
        </Button>
        <div>
          <h2 className="text-lg font-semibold text-[#2c3e50]">{title}</h2>
        </div>
      </div>

      {/* Right: Notifications + User Info */}
      <div className="flex items-center gap-4">
        {/* Notification Bell */}
        <Button variant="ghost" size="icon" className="relative" aria-label="Notifications">
          <Bell className="h-5 w-5 text-gray-500" />
          {notificationCount > 0 && (
            <Badge className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-red-500 p-0 text-[10px] text-white">
              {notificationCount}
            </Badge>
          )}
        </Button>

        {/* User Info */}
        <div className="flex items-center gap-3">
          <div className="hidden text-right sm:block">
            <p className="text-sm font-medium text-[#2c3e50]">{userName}</p>
            {userGrade && (
              <p className="text-xs text-gray-500">Grade {userGrade}</p>
            )}
          </div>
          <Avatar className="h-9 w-9">
            {userAvatar ? (
              <AvatarImage src={userAvatar} alt={userName} />
            ) : (
              <AvatarFallback className="bg-gradient-to-br from-[#91C4D9] to-[#5b9ebd] text-sm font-semibold text-white">
                {initials}
              </AvatarFallback>
            )}
          </Avatar>
        </div>
      </div>
    </header>
  )
}
