'use client'

import { Bell, LogOut, Menu, RefreshCw, Search } from 'lucide-react'
import type { View } from './types'

interface HeaderProps {
  view: View
  onRefresh: () => void
  loading: boolean
  setMobile: (mobile: boolean) => void
  onLogout: () => void
}

export function Header({ view, onRefresh, loading, setMobile, onLogout }: HeaderProps) {
  return (
    <header className="topbar">
      <div className="header-title">
        <button className="menu-button" onClick={() => setMobile(true)}>
          <Menu size={19} />
        </button>
        <div>
          <p>Workspace / {view}</p>
          <h1>{view}</h1>
        </div>
      </div>
      <div className="header-actions">
        <div className="search">
          <Search size={16} />
          <input placeholder="Search anything..." aria-label="Search" />
        </div>
        <div className="connection">
          <span className="pulse" /> <span>API connected</span>
        </div>
        <button className="icon-button">
          <Bell size={17} />
        </button>
        <button className="refresh" onClick={onRefresh} disabled={loading}>
          {loading ? <RefreshCw className="spin" size={15} /> : <RefreshCw size={15} />}
          <span>{loading ? 'Checking' : 'Refresh all'}</span>
        </button>
        <button className="logout-button" onClick={onLogout} title="Sign out">
          <LogOut size={16} /> <span>Sign out</span>
        </button>
      </div>
    </header>
  )
}