'use client'

import type { AppUser, Prospect } from '@/lib/types'

interface TopBarProps {
  title: string
  subtitle: string
  prospects: Prospect[]
  onExport: () => void
  onGenerateOutreach: () => void
  user: AppUser
  onLogout: () => void | Promise<void>
}

export default function TopBar({ title, subtitle, prospects, onExport, onGenerateOutreach, user, onLogout }: TopBarProps) {
  return (
    <header className="flex justify-between items-center px-8 py-4 bg-[#0b1326]/70 backdrop-blur-xl border-b border-[#574143]/10 z-40">
      <div>
        <h2 style={{ fontFamily: 'Manrope, sans-serif' }} className="font-extrabold text-2xl text-slate-100 tracking-tight">
          {title}
        </h2>
        <p className="text-slate-400 text-sm font-medium mt-0.5">{subtitle}</p>
      </div>

      <div className="flex items-center gap-4">
        <div className="hidden xl:flex items-center gap-3 px-3 py-2 rounded-xl bg-[#131b2e] border border-[#574143]/10">
          <div className="w-9 h-9 rounded-full bg-[#ffb2b9]/15 text-[#ffb2b9] flex items-center justify-center font-black text-sm">
            {user.display_name.charAt(0).toUpperCase()}
          </div>
          <div>
            <p className="text-sm font-bold text-slate-100">{user.display_name}</p>
            <p className="text-[11px] text-slate-500">{user.email}</p>
          </div>
        </div>
        <div className="flex gap-2">
          <button
            onClick={onExport}
            disabled={prospects.length === 0}
            className="px-5 py-2.5 rounded-xl text-slate-100 font-bold text-sm bg-[#2d3449] transition-transform active:scale-95 hover:opacity-90 disabled:opacity-40"
          >
            Export Results
          </button>
          <button
            onClick={onGenerateOutreach}
            className="px-5 py-2.5 rounded-xl text-[#6f0122] font-bold text-sm bg-gradient-to-br from-[#ffb2b9] to-[#fb7185] transition-transform active:scale-95 hover:opacity-90"
          >
            Generate Outreach
          </button>
          <button
            onClick={onLogout}
            className="px-4 py-2.5 rounded-xl text-slate-300 font-bold text-sm bg-[#131b2e] border border-[#574143]/10 transition-transform active:scale-95 hover:text-white"
          >
            Logout
          </button>
        </div>
      </div>
    </header>
  )
}