Projects/front/src/components/networking/LabPulsePanel.tsx

// src/components/networking/LabPulsePanel.tsx
import { useState } from "react";
import { StoryViewer } from "@/components/social/StoryViewer";
import { Newspaper, FlaskConical, TrendingUp } from "lucide-react";

export function LabPulsePanel() {
  const [showStories, setShowStories] = useState(false);
  const [activeStoryIndex, setActiveStoryIndex] = useState(0);

  // In a real app, fetch stories from backend
  const stories = [
    { id: "s1", author: { username: "dr.chen", fullName: "Dr. Chen" }, slides: [{ type: "image", src: "/samples/lab1.jpg" }] },
    { id: "s2", author: { username: "dr.patel", fullName: "Dr. Patel" }, slides: [{ type: "poll", question: "Best approach?", options: ["CRISPR", "RNAi"] }] },
  ];

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="font-bold text-lg flex items-center gap-2"><Newspaper className="w-5 h-5 text-orange-500"/> Lab Pulse</h3>
      </div>

      {/* Stories row */}
      <div className="flex gap-3 overflow-x-auto pb-2">
        {stories.map((story, idx) => (
          <button key={story.id} onClick={() => { setActiveStoryIndex(idx); setShowStories(true); }}
            className="shrink-0 w-20 flex flex-col items-center gap-1">
            <div className="w-16 h-16 rounded-full bg-linear-to-br from-purple-400 to-pink-500 p-[2px]">
              <div className="w-full h-full rounded-full bg-white dark:bg-gray-800 flex items-center justify-center text-2xl">
                {story.author.fullName[0]}
              </div>
            </div>
            <span className="text-[10px] text-gray-600 dark:text-gray-400 truncate w-full text-center">{story.author.username}</span>
          </button>
        ))}
      </div>

      {/* Quick Bench Note input (could be a widget) */}
      <div className="glass rounded-xl p-3 flex gap-2">
        <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold">?</div>
        <input type="text" placeholder="What's at your bench today?" className="flex-1 bg-transparent border-none outline-none text-sm" />
        <button className="btn btn-primary btn-xs">Post</button>
      </div>

      {showStories && <StoryViewer stories={stories as any} initialIndex={activeStoryIndex} onClose={() => setShowStories(false)} />}
    </div>
  );
}