'use client';

import React from 'react';
import Link from 'next/link';
import { useSession } from 'next-auth/react';

export default function SimpleHeader() {
  const { data: session } = useSession();

  return (
    <header className="sticky top-0 flex w-screen h-20 bg-white border-gray-200 z-50 dark:border-gray-800 dark:bg-gray-900 lg:border-b">
      <div className="flex items-center justify-between w-full px-6">
        <div className="flex items-center gap-4">
          <Link href="/" className="text-xl font-bold text-gray-900 dark:text-white">
            Datanope
          </Link>
          <nav className="flex items-center gap-4">
            <Link href="/" className="text-gray-700 dark:text-gray-200 hover:text-blue-500 px-3 py-2">
              Dashboard
            </Link>
            <Link href="/clients" className="text-gray-700 dark:text-gray-200 hover:text-blue-500 px-3 py-2">
              Clients
            </Link>
            <Link href="/tasks" className="text-gray-700 dark:text-gray-200 hover:text-blue-500 px-3 py-2">
              Tâches
            </Link>
          </nav>
        </div>
        <div className="flex items-center gap-4">
          <span className="text-gray-700 dark:text-gray-200">
            {session?.user?.name || 'Utilisateur'}
          </span>
        </div>
      </div>
    </header>
  );
}