import { BookOutlined, EyeOutlined, TeamOutlined } from "@ant-design/icons";
import { Typography } from "antd";
import { PostDto } from "@nice/common";

const { Title, Text } = Typography;
const DeptInfo = ({ post }: { post: PostDto }) => {
	return (
		<div className="gap-1 flex items-center justify-between flex-grow">
			<div className=" flex justify-start gap-1 items-center">
				<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
				{post?.depts && post?.depts?.length > 0 ? (
					<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
						{post?.depts?.length > 1
							? `${post.depts[0].name}等`
							: post?.depts?.[0]?.name}
					</Text>
				) : (
					<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
						未设置单位
					</Text>
				)}
			</div>
			{post && (
				<div className="flex items-center gap-2">
					<span className="gap-1 text-xs font-medium text-gray-500 flex items-center">
						<EyeOutlined />
						{`${post?.meta?.views || 0}`}
					</span>
					{post?.studentIds && post?.studentIds?.length > 0 && (
						<span className="gap-1 text-xs font-medium text-gray-500 flex items-center">
							<BookOutlined />
							{`${post?.studentIds?.length || 0}`}
						</span>
					)}
				</div>
			)}
		</div>
	);
};

export default DeptInfo;