1  import { Fire, CaretLeft } from '@phosphor-icons/react'
 2  import { useTranslation } from 'react-i18next'
 3  import { Button } from './ui/button'
 4  import { IconButton } from './IconButton'
 5  import { LanguageSelector } from './LanguageSelector'
 6  import { useNavigate } from 'react-router-dom'
 7  
 8  interface HeaderProps {
 9    isLoggedIn?: boolean
10    address?: string
11    onLogin?: () => void
12    onAccount?: () => void
13    fireCount?: number
14    showBack?: boolean
15    onBack?: () => void
16    pageTitle?: string
17  }
18  
19  export function Header({ 
20    isLoggedIn = false, 
21    address = '0x742d35Cc6634C0532925a3b8D',
22    onLogin,
23    onAccount,
24    fireCount = 12,
25    showBack = false,
26    onBack,
27    pageTitle
28  }: HeaderProps) {
29    const { t } = useTranslation()
30    const navigate = useNavigate()
31    
32    const formatAddress = (addr: string) => {
33      return `${addr.slice(0, 6)}...${addr.slice(-3)}`
34    }
35    
36    const handleAccountClick = () => {
37      if (onAccount) {
38        onAccount()
39      } else {
40        navigate('/account')
41      }
42    }
43  
44    return (
45      <header className="w-full bg-neutral-900 border-b border-neutral-700 h-16">
46        <div className="w-full max-w-2xl mx-auto px-6 py-4 flex items-center justify-between h-full">
47          {/* Left side - Back button and optional title */}
48          <div className="flex items-center gap-4">
49            {showBack && (
50              <IconButton variant="ghost" onClick={onBack}>
51                <CaretLeft size={20} weight="regular" />
52              </IconButton>
53            )}
54            {pageTitle && (
55              <h1 className="text-lg font-semibold text-white truncate">
56                {pageTitle}
57              </h1>
58            )}
59          </div>
60  
61          {/* Right side - Crown/Fire icons and Login/Account button */}
62          <div className="flex items-center gap-4">
63            <div className="flex items-center gap-2">
64              <div className="w-7 h-7 flex items-center justify-center">
65                <Fire weight="fill" size={24} color="#EF4444" />
66              </div>
67              <span className="text-neutral-300 font-bold text-sm">{fireCount}</span>
68            </div>
69            
70            <div className="flex items-center gap-2">
71              {isLoggedIn ? (
72                <Button 
73                  variant="outline" 
74                  onClick={handleAccountClick}
75                >
76                  {formatAddress(address)}
77                </Button>
78              ) : (
79                <Button variant="outline" onClick={onLogin}>
80                  {t('common.connectWallet')}
81                </Button>
82              )}
83              <LanguageSelector />
84            </div>
85          </div>
86        </div>
87      </header>
88    )
89  }