Prmbr/src/components/layout/Header.tsx

'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useTranslations } from 'next-intl'
import { useAuth } from '@/hooks/useAuth'
import { Button } from '@/components/ui/button'
import { ThemeToggle, MobileThemeToggle } from '@/components/ui/theme-toggle'
import { LanguageToggle, MobileLanguageToggle } from '@/components/ui/language-toggle'
import { Menu, X, Zap } from 'lucide-react'

export function Header() {
  const { user, signOut } = useAuth()
  const t = useTranslations('navigation')
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

  return (
    <header className="sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          <div className="flex items-center">
            <Link href="/" className="flex-shrink-0 flex items-center hover:opacity-80 transition-opacity">
              <Zap className="h-8 w-8 text-primary" />
              <span className="ml-2 text-xl font-bold text-foreground">Prmbr</span>
            </Link>
          </div>

          {/* Desktop Navigation */}
          <div className="hidden md:block">
            <div className="ml-10 flex items-baseline space-x-4">
              <Link href="/" className="text-muted-foreground hover:text-foreground px-3 py-2 text-sm font-medium transition-colors">
                {t('home')}
              </Link>
              <Link href="/studio" className="text-muted-foreground hover:text-foreground px-3 py-2 text-sm font-medium transition-colors">
                {t('studio')}
              </Link>
              <a href="#pricing" className="text-muted-foreground hover:text-foreground px-3 py-2 text-sm font-medium transition-colors">
                Pricing
              </a>
            </div>
          </div>

          {/* Desktop Auth */}
          <div className="hidden md:block">
            <div className="flex items-center space-x-2">
              <LanguageToggle variant="dropdown" showLabel={false} />
              <ThemeToggle variant="dropdown" showLabel={false} />
              {user ? (
                <div className="flex items-center space-x-2">
                  <Button variant="ghost" size="sm" onClick={() => window.location.href = '/profile'}>
                    {t('profile')}
                  </Button>
                  <Button variant="outline" onClick={signOut}>
                    {t('signOut')}
                  </Button>
                </div>
              ) : (
                <div className="flex items-center space-x-2">
                  <Button variant="ghost" onClick={() => window.location.href = '/signin'}>
                    {t('signIn')}
                  </Button>
                  <Button onClick={() => window.location.href = '/signup'}>
                    {t('signUp')}
                  </Button>
                </div>
              )}
            </div>
          </div>

          {/* Mobile controls */}
          <div className="md:hidden flex items-center space-x-2">
            <LanguageToggle variant="button" />
            <ThemeToggle variant="button" />
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="text-muted-foreground hover:text-foreground p-2 transition-colors"
              aria-label="Toggle menu"
            >
              {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
            </button>
          </div>
        </div>

        {/* Mobile menu */}
        {mobileMenuOpen && (
          <div className="md:hidden">
            <div className="px-2 pt-2 pb-3 space-y-1 border-t">
              <Link href="/" className="block text-muted-foreground hover:text-foreground px-3 py-2 text-base font-medium transition-colors rounded-md hover:bg-accent">
                {t('home')}
              </Link>
              <Link href="/studio" className="block text-muted-foreground hover:text-foreground px-3 py-2 text-base font-medium transition-colors rounded-md hover:bg-accent">
                {t('studio')}
              </Link>
              <a href="#pricing" className="block text-muted-foreground hover:text-foreground px-3 py-2 text-base font-medium transition-colors rounded-md hover:bg-accent">
                Pricing
              </a>
              
              {/* Mobile Language Toggle */}
              <div className="pt-4 pb-2 border-t">
                <MobileLanguageToggle />
              </div>
              
              {/* Mobile Theme Toggle */}
              <div className="pt-2 pb-2 border-t">
                <MobileThemeToggle />
              </div>
              
              <div className="pt-2 pb-2 border-t">
                {user ? (
                  <div className="space-y-2">
                    <Button variant="ghost" className="w-full justify-start" onClick={() => window.location.href = '/profile'}>
                      {t('profile')}
                    </Button>
                    <Button variant="outline" className="w-full" onClick={signOut}>
                      {t('signOut')}
                    </Button>
                  </div>
                ) : (
                  <div className="space-y-2">
                    <Button variant="ghost" className="w-full" onClick={() => window.location.href = '/signin'}>
                      {t('signIn')}
                    </Button>
                    <Button className="w-full" onClick={() => window.location.href = '/signup'}>
                      {t('signUp')}
                    </Button>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}
      </div>
    </header>
  )
}