'use client';

import Link from 'next/link';
import { useAuth } from '@/lib/auth';

export default function Header() {
  const { user, signOut } = useAuth();
  
  const handleLogout = async () => {
    await signOut();
  };
  
  return (
    <header className="w-full py-4 border-b border-gray-200 bg-white">
      <div className="container flex items-center justify-between px-4 mx-auto">
        <div className="flex items-center space-x-4">
          <Link href="/analytics" className="flex items-center space-x-2">
            <svg
              className="w-6 h-6 text-blue-500"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
              <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
            </svg>
            <span className="text-xl font-bold text-gray-900">ShortURL Analytics</span>
          </Link>
          
          {user && (
            <nav className="ml-6">
              <ul className="flex space-x-4">
                <li>
                  <Link href="/analytics" className="text-sm text-gray-700 hover:text-blue-500">
                    Analytics
                  </Link>
                </li>
                <li>
                  <Link href="/links" className="text-sm text-gray-700 hover:text-blue-500">
                    Short Links
                  </Link>
                </li>
                <li>
                  <Link href="/create-shorturl" className="text-sm text-gray-700 hover:text-blue-500">
                    Create Short URL
                  </Link>
                </li>
              </ul>
            </nav>
          )}
        </div>
        
        {user && (
          <div className="flex items-center space-x-4">
            <div className="text-sm text-gray-700">
              {user.email}
            </div>
            <button 
              onClick={handleLogout}
              className="px-4 py-2 text-sm text-white bg-blue-500 rounded hover:bg-blue-600"
            >
              Logout
            </button>
          </div>
        )}
      </div>
    </header>
  );
}