Projects/front/src/components/feed/LabUpdatePost.tsx

import { useState } from "react";
import { Heart, MessageCircle, Share2, Eye, Bookmark, Newspaper } from "lucide-react";

interface LabUpdatePostProps {
  author: { username: string; fullName?: string; avatarUrl?: string; labName: string };
  title: string;
  body: string; // HTML
  likes: number;
  comments: number;
  views: number;
  timestamp: string;
}

export function LabUpdatePost({ author, title, body, likes, comments, views, timestamp }: LabUpdatePostProps) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 overflow-hidden shadow-sm">
      {/* Lab header */}
      <div className="px-5 py-4 border-b border-gray-100 dark:border-gray-700 flex items-center gap-3 bg-linear-to-r from-primary/5 to-transparent">
        <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center text-primary">
          <Newspaper className="w-6 h-6" />
        </div>
        <div>
          <p className="font-bold text-lg">{author.labName}</p>
          <p className="text-xs text-gray-500">Lab Update by {author.fullName ?? author.username} · {new Date(timestamp).toLocaleDateString()}</p>
        </div>
      </div>

      {/* Title and body */}
      <div className="p-5">
        <h2 className="text-xl font-bold mb-3">{title}</h2>
        <div className="prose prose-sm dark:prose-invert max-w-none" dangerouslySetInnerHTML={{ __html: body }} />
      </div>

      {/* Actions */}
      <div className="px-5 py-3 border-t border-gray-100 dark:border-gray-700 flex items-center gap-4">
        <button className="flex items-center gap-1.5 text-gray-500 hover:text-red-500 transition">
          <Heart className="w-5 h-5" /><span className="text-xs">{likes}</span>
        </button>
        <button className="flex items-center gap-1.5 text-gray-500 hover:text-primary transition">
          <MessageCircle className="w-5 h-5" /><span className="text-xs">{comments}</span>
        </button>
        <button className="flex items-center gap-1.5 text-gray-500 hover:text-primary transition">
          <Share2 className="w-5 h-5" />
        </button>
        <div className="flex-1" />
        <span className="text-xs text-gray-400 flex items-center gap-1"><Eye className="w-3.5 h-3.5"/>{views}</span>
        <button className="text-gray-500 hover:text-amber-500 transition"><Bookmark className="w-5 h-5"/></button>
      </div>
    </div>
  );
}