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

import { Heart, MessageCircle, Share2, FlaskConical, Clock } from "lucide-react";

interface QuickNotePostProps {
  author: { username: string; avatarUrl?: string };
  body: string;
  location?: string;  // e.g., "at the bench"
  likes: number;
  comments: number;
  timestamp: string;
}

export function QuickNotePost({ author, body, location, likes, comments, timestamp }: QuickNotePostProps) {
  return (
    <div className="bg-white dark:bg-gray-800 rounded-2xl border border-gray-200 dark:border-gray-700 p-4 shadow-sm">
      <div className="flex items-start gap-3">
        <div className="w-10 h-10 rounded-full bg-linear-to-br from-primary to-secondary text-white flex items-center justify-center font-bold shrink-0">
          {author.username[0].toUpperCase()}
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2">
            <span className="font-semibold text-sm">{author.username}</span>
            <span className="text-[10px] text-gray-400 flex items-center gap-1"><Clock className="w-3 h-3"/>{new Date(timestamp).toLocaleTimeString()}</span>
          </div>
          <p className="text-sm text-gray-700 dark:text-gray-300 mt-1.5 whitespace-pre-wrap">{body}</p>
          {location && (
            <span className="inline-flex items-center gap-1 mt-2 text-[10px] bg-primary/10 text-primary px-2 py-0.5 rounded-full">
              <FlaskConical className="w-3 h-3"/> {location}
            </span>
          )}
        </div>
      </div>
      <div className="flex items-center gap-4 mt-3 pt-3 border-t border-gray-100 dark:border-gray-700">
        <button className="flex items-center gap-1.5 text-gray-500 hover:text-red-500 transition text-xs">
          <Heart className="w-4 h-4"/>{likes}
        </button>
        <button className="flex items-center gap-1.5 text-gray-500 hover:text-primary transition text-xs">
          <MessageCircle className="w-4 h-4"/>{comments}
        </button>
        <button className="flex items-center gap-1.5 text-gray-500 hover:text-primary transition text-xs">
          <Share2 className="w-4 h-4"/>
        </button>
      </div>
    </div>
  );
}