import React, { useContext } from "react";
import { motion } from "framer-motion";
import {
	LikeFilled,
	LikeOutlined,
	EyeOutlined,
	CommentOutlined,
} from "@ant-design/icons";
import { Button, Tooltip } from "antd/lib";
import { PostDetailContext } from "../context/PostDetailContext";
import PostLikeButton from "./PostLikeButton";
import PostResources from "../PostResources";
import PostHateButton from "./PostHateButton";
export function StatsSection() {
	const { post } = useContext(PostDetailContext);

	return (
		<div

			className="mt-6 flex flex-wrap gap-4  justify-end items-center">

			<div className=" flex gap-2">
				<Button title="浏览量" type="default" shape="round" icon={<EyeOutlined />}>
					<span className="mr-1">浏览量</span>{post?.views}
				</Button>
				<Button type="default" title="回复数" shape="round" icon={<CommentOutlined />}>
					<span className="mr-1">回复数</span>{post?.commentsCount}
				</Button>
				<PostHateButton post={post}></PostHateButton>
				<PostLikeButton post={post}></PostLikeButton>
			</div>

		</div>
	);
}
