'use client';

import { Moon, Sun } from 'lucide-react';
import Image from 'next/image';
import Link from 'next/link';
import { useTheme } from 'next-themes';
import { useTranslations } from '@/components/locale-provider';
import { Button } from '@/components/ui/button';

export function SiteHeader({
  inviteUrl,
  supportUrl,
  isLoggedIn
}: {
  inviteUrl: string;
  supportUrl?: string;
  isLoggedIn: boolean;
}) {
  const t = useTranslations();
  const { theme, setTheme } = useTheme();

  return (
    <header className="border-b border-border">
      <div className="mx-auto flex h-14 w-full max-w-[1200px] items-center justify-between px-6">
        <Link href="/" className="flex items-center gap-2 font-semibold">
          <Image src="/nexumi-logo.svg" alt="Nexumi" width={28} height={28} priority />
          Nexumi
        </Link>
        <nav className="flex items-center gap-2">
          <Button asChild variant="ghost" size="sm">
            <Link href="/status">{t('site.nav.status')}</Link>
          </Button>
          <Button asChild variant="ghost" size="sm">
            <a href={inviteUrl} target="_blank" rel="noreferrer">
              {t('site.nav.invite')}
            </a>
          </Button>
          {supportUrl ? (
            <Button asChild variant="ghost" size="sm">
              <a href={supportUrl} target="_blank" rel="noreferrer">
                {t('site.nav.support')}
              </a>
            </Button>
          ) : null}
          <Button asChild size="sm">
            <Link href={isLoggedIn ? '/dashboard' : '/login'}>
              {isLoggedIn ? t('site.nav.dashboard') : t('site.nav.login')}
            </Link>
          </Button>
          <Button
            variant="ghost"
            size="sm"
            aria-label={t('userMenu.theme')}
            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
          >
            {theme === 'dark' ? <Sun className="size-4" /> : <Moon className="size-4" />}
          </Button>
        </nav>
      </div>
    </header>
  );
}
