Refactor and other improvements

frontend/src/components/map/AISummaryCard.tsx

@@ -0,0 +1,58 @@
+import { ChevronIcon } from '../ui/icons';
+import { LightbulbIcon } from '../ui/icons/LightbulbIcon';
+
+interface AISummaryCardProps {
+  summary?: string;
+  loading?: boolean;
+  error?: string | null;
+  expanded: boolean;
+  onToggleExpanded: () => void;
+}
+
+export default function AISummaryCard({
+  summary,
+  loading,
+  error,
+  expanded,
+  onToggleExpanded,
+}: AISummaryCardProps) {
+  if (!summary && !loading && !error) return null;
+
+  return (
+    <div className="px-3 pt-3 pb-1">
+      <div className="bg-teal-50 dark:bg-teal-900/20 border border-teal-200 dark:border-teal-800/50 rounded p-2.5">
+        <button
+          onClick={onToggleExpanded}
+          className="w-full flex items-center justify-between gap-1.5 mb-1.5"
+        >
+          <div className="flex items-center gap-1.5">
+            <LightbulbIcon className="w-3.5 h-3.5 text-teal-600 dark:text-teal-400" />
+            <span className="text-xs font-semibold text-teal-700 dark:text-teal-400">
+              AI Summary
+            </span>
+          </div>
+          <ChevronIcon
+            direction={expanded ? 'down' : 'right'}
+            className="w-3.5 h-3.5 text-teal-600 dark:text-teal-400"
+          />
+        </button>
+        {expanded && (
+          <>
+            {error ? (
+              <div className="text-xs text-warm-600 dark:text-warm-400">
+                Failed to generate summary.
+              </div>
+            ) : loading ? (
+              <div className="space-y-1.5">
+                <div className="h-3 bg-teal-200/60 dark:bg-teal-800/40 rounded animate-pulse w-full" />
+                <div className="h-3 bg-teal-200/60 dark:bg-teal-800/40 rounded animate-pulse w-4/5" />
+              </div>
+            ) : (
+              <p className="text-xs text-warm-700 dark:text-warm-300 leading-relaxed">{summary}</p>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}