import { Card, Typography, Button, Empty } from "antd";

import { PostDto } from "@nice/common";
import DeptInfo from "@web/src/app/main/path/components/DeptInfo";
import TermInfo from "@web/src/app/main/path/components/TermInfo";
import { PictureOutlined } from "@ant-design/icons";

interface PostCardProps {
	post?: PostDto;
	onClick?: (post?: PostDto) => void;
}
const { Title } = Typography;
export default function PostCard({ post, onClick }: PostCardProps) {
	const handleClick = (post: PostDto) => {
		onClick?.(post);
	};
	return (
		<Card
			onClick={() => handleClick(post)}
			key={post?.id}
			hoverable
			className="group overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
			cover={
				<div className="relative h-56 bg-gradient-to-br from-gray-900 to-gray-800 overflow-hidden group">
					{post?.meta?.thumbnail ? (
						<div
							className="absolute inset-0 bg-cover bg-center transform transition-all duration-700 ease-out group-hover:scale-110"
							style={{
								backgroundImage: `url(${post?.meta?.thumbnail})`,
							}}
						/>
					) : (
						<div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-primary-500 to-primary-700">
							<PictureOutlined className="text-white  text-6xl" />
						</div>
					)}
				</div>
			}>
			<div className="px-4 ">
				<div className="overflow-hidden hover:overflow-auto">
					<div className="flex gap-2 h-7   whiteSpace-nowrap">
						<TermInfo post={post}></TermInfo>
					</div>
				</div>
				<Title
					level={4}
					className="mb-4 mt-4 line-clamp-2 font-bold leading-snug text-gray-800 hover:text-blue-600 transition-colors duration-300 group-hover:scale-[1.02] transform origin-left">
					<button> {post?.title}</button>
				</Title>
				<div className="flex items-center mb-4  rounded-lg transition-all duration-300 hover:bg-blue-50 group">
					<DeptInfo post={post}></DeptInfo>
				</div>

				<div className="pt-4 border-t border-gray-100 text-center">
					<Button
						type="primary"
						size="large"
						className="w-full shadow-[0_8px_20px_-6px_rgba(59,130,246,0.5)] hover:shadow-[0_12px_24px_-6px_rgba(59,130,246,0.6)] 
            transform hover:translate-y-[-2px] transition-all duration-500 ease-out">
						{"立即学习"}
					</Button>
				</div>
			</div>
		</Card>
	);
}