'use client';
import Link from 'next/link';

import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Settings, ArrowLeft } from 'lucide-react';

interface NavigationProps {
  showBackButton?: boolean;
  backUrl?: string;
}

export default function Navigation({ showBackButton = false, backUrl = '/' }: NavigationProps) {

  return (
    <Card className="mb-6 border-0 shadow-sm">
      <div className="p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            {showBackButton && (
              <Button asChild variant="ghost" size="sm">
                <Link href={backUrl}>
                  <ArrowLeft className="w-4 h-4 mr-2" />
                  Retour
                </Link>
              </Button>
            )}
            <h1 className="text-xl font-semibold text-slate-900 dark:text-slate-100">
              Mes Budgets Participatifs - Admin
            </h1>
          </div>
          
          <div className="flex items-center space-x-2">
            <Button asChild variant="ghost" size="sm">
              <Link href="/admin/settings">
                <Settings className="w-4 h-4 mr-2" />
                Paramètres
              </Link>
            </Button>
            <Button asChild variant="ghost" size="sm">
              <Link href="/api/auth/signout">
                Déconnexion
              </Link>
            </Button>
          </div>
        </div>
      </div>
    </Card>
  );
}