src/components/organisms/Navigation.tsx

"use client";

import React from "react";

interface NavigationProps {
  user?: {
    name?: string;
    avatarUrl?: string;
  };
}

const Navigation: React.FC<NavigationProps> = ({ user }) => {
  return (
    <nav className="flex flex-col gap-4 p-4 border-r border-gray-200 min-h-screen w-60">
      {/* Navigation links */}
      <ul className="list-none p-0 m-0 flex flex-col gap-2">
        <li>
          <a href="/dashboard" className="text-sm font-medium hover:underline">
            Dashboard
          </a>
        </li>
        <li>
          <a href="/editor" className="text-sm font-medium hover:underline">
            Editor
          </a>
        </li>
        <li>
          <a href="/settings" className="text-sm font-medium hover:underline">
            Settings
          </a>
        </li>
      </ul>

      {/* User info if passed */}
      {user && (
        <div className="mt-auto flex items-center gap-2 pt-4">
          <img
            src={user.avatarUrl || "/default-avatar.png"}
            alt={user.name || "User"}
            className="h-10 w-10 rounded-full object-cover"
          />
          <span className="text-sm font-medium">{user.name || "Anonymous"}</span>
        </div>
      )}
    </nav>
  );
};

export default Navigation;