Projects/front/src/components/gap-analysis/GraphLegend.tsx

// src/components/gap-analysis/GraphLegend.tsx
import { useState } from "react";
import type { GraphNodeType } from "@/types/gap-analysis";

const LEGEND_ITEMS: { type: GraphNodeType; label: string; color: string }[] = [
  { type: "paper", label: "Paper", color: "#6366f1" },
  { type: "concept", label: "Concept", color: "#06b6d4" },
  { type: "method", label: "Method", color: "#f59e0b" },
  { type: "finding", label: "Finding", color: "#10b981" },
  { type: "gap", label: "Research Gap", color: "#ef4444" },
  { type: "hypothesis", label: "Hypothesis", color: "#8b5cf6" },
];

export function GraphLegend() {
  const [collapsed, setCollapsed] = useState(false);

  if (collapsed) {
    return (
      <button
        onClick={() => setCollapsed(false)}
        className="bg-white dark:bg-gray-800 rounded-lg shadow px-2 py-1 text-xs text-gray-500"
      >
        Legend ▸
      </button>
    );
  }

  return (
    <div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 p-3">
      <div className="flex items-center justify-between mb-2">
        <span className="text-xs font-semibold text-gray-500">Legend</span>
        <button
          onClick={() => setCollapsed(true)}
          className="text-gray-400 hover:text-gray-600 text-xs"
        >
          ✕
        </button>
      </div>
      <div className="space-y-1.5">
        {LEGEND_ITEMS.map((item) => (
          <div key={item.type} className="flex items-center gap-2 text-xs">
            <span
              className="w-3 h-3 rounded-full inline-block"
              style={{ backgroundColor: item.color }}
            />
            <span className="text-gray-600 dark:text-gray-400">{item.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}