doctor-mail/apps/web/src/components/models/post/detail/PostCommentCard.tsx

import { PostDto, VisitType } from "@nice/common";
import { motion } from "framer-motion";
import dayjs from "dayjs";

import { Avatar } from "antd";
import { useVisitor } from "@nice/client";
import { useContext, useState } from "react";
import { PostDetailContext } from "./context/PostDetailContext";
import { LikeFilled, LikeOutlined } from "@ant-design/icons";
import PostLikeButton from "./PostHeader/PostLikeButton";
import { CustomAvatar } from "@web/src/components/presentation/CustomAvatar";

export default function PostCommentCard({
	post,
	index,
	isReceiverComment,
}: {
	post: PostDto;
	index: number;
	isReceiverComment: boolean;
}) {
	const { user } = useContext(PostDetailContext);
	const { like, unLike } = useVisitor();
	const [liked, setLiked] = useState(post?.liked || false);
	const [likeCount, setLikeCount] = useState(post?.likes || 0);

	async function likeThisPost() {
		if (!liked) {
			try {
				setLikeCount((prev) => prev + 1);
				setLiked(true);
				like.mutateAsync({
					data: {
						visitorId: user?.id || null,
						postId: post.id,
						type: VisitType.LIKE,
					},
				});
			} catch (error) {
				console.error("Failed to like post:", error);
				setLikeCount((prev) => prev - 1);
				setLiked(false);
			}
		} else {
			setLikeCount((prev) => prev - 1);
			setLiked(false);
			unLike.mutateAsync({
				where: {
					visitorId: user?.id || null,
					postId: post.id,
					type: VisitType.LIKE,
				},
			});
		}
	}
	return (
		<motion.div
			className="bg-white rounded-lg shadow-sm border border-slate-200 p-4"
			layout>
			<div className="flex items-start space-x-3 gap-4">
				<div className="flex-shrink-0">
					<CustomAvatar
						src={post.author?.avatar}
						size={40}
						name={
							!post.author?.avatar && post.author?.showname
						}></CustomAvatar>
				</div>
				<div className="flex-1 min-w-0">
					<div className="flex flex-1 justify-between">
						<div className="flex  space-x-2" style={{ height: 40 }}>
							<span className="font-medium text-slate-900">
								{post.author?.showname || "匿名用户"}
							</span>
							<span className="text-sm text-slate-500">
								{dayjs(post?.createdAt).format(
									"YYYY-MM-DD HH:mm"
								)}
							</span>
							{isReceiverComment && (
								<span className="inline-flex items-center px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">
									官方回答
								</span>
							)}
						</div>
						{/* 添加有帮助按钮 */}
						<PostLikeButton post={post}></PostLikeButton>
					</div>

					<div
						className="ql-editor text-slate-800"
						style={{
							padding: 0,
						}}
						dangerouslySetInnerHTML={{ __html: post.content || "" }}
					/>
				</div>
			</div>
		</motion.div>
	);
}