import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '@/contexts/AuthContext';
import { useTranslation } from '@/hooks/useI18n';
import { LogIn } from 'lucide-react';
import Button from '@/components/ui/Button';
import LanguageSwitcher from '@/components/ui/LanguageSwitcher';
import ThemeToggle from '@/components/ui/ThemeToggle';

interface HeaderActionsProps {
  showThemeToggle?: boolean;
  showLanguageSwitcher?: boolean;
  showAuthButton?: boolean;
  className?: string;
}

export const HeaderActions: React.FC<HeaderActionsProps> = ({
  showThemeToggle = true,
  showLanguageSwitcher = true,
  showAuthButton = true,
  className = '',
}) => {
  const { t } = useTranslation();
  const { isAuthenticated, user } = useAuth();
  const navigate = useNavigate();

  const handleAuthClick = () => {
    if (!isAuthenticated) {
      navigate('/login');
    } else if (user?.role === 'admin') {
      navigate('/admin');
    } else {
      navigate('/dashboard');
    }
  };

  return (
    <div className={`flex items-center gap-2 ${className}`}>
      {showThemeToggle && <ThemeToggle />}
      {showLanguageSwitcher && <LanguageSwitcher />}
      {showAuthButton && (
        <Button
          onClick={handleAuthClick}
          variant="primary-ghost"
          aria-label={t('topBar.loginButton')}
        >
          <LogIn className="h-4 sm:mr-2 text-current w-4" />
          <span className="hidden sm:inline">
            {isAuthenticated
              ? user?.role === 'admin'
                ? t('topBar.adminButton')
                : t('topBar.dashboardButton')
              : t('topBar.loginButton')}
          </span>
        </Button>
      )}
    </div>
  );
};

export default HeaderActions;