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

import {
    EyeOutlined,
    LikeOutlined,
    LikeFilled,
    UserOutlined,
    BankOutlined,
    CalendarOutlined,
    FileTextOutlined,
    SendOutlined,
} from "@ant-design/icons";
import { Button, Typography, Space, Tooltip } from "antd";
import { PostDto, PostStateLabels } from "@nice/common";
import dayjs from "dayjs";
import PostLikeButton from "./detail/PostHeader/PostLikeButton";
import { LetterBadge } from "./LetterBadge";
const { Title, Paragraph, Text } = Typography;

interface LetterCardProps {
    letter: PostDto;
}

export function LetterCard({ letter }: LetterCardProps) {
    return (
        <div onClick={() => {
            window.open(`/${letter.id}/detail`)
        }}
            className=" cursor-pointer w-full p-6 bg-white rounded-xl  group relative overflow-hidden  duration-300 hover:-translate-y-1  transition-all ease-in-out "
        >
            <div className="flex flex-col gap-4">
                <div className="flex justify-between items-start">
                    <Title level={4} className="!mb-0 flex-1 font-serif tracking-tight text-gray-800">
                        <a
                            href={`/${letter.id}/detail`}
                            target="_blank"

                            className="text-primary hover:text-primary-600 transition-colors duration-200 hover:underline">
                            {letter.title}
                        </a>
                    </Title>
                </div>
                {/* Meta Info */}
                <div className="flex justify-between items-center text-sm text-gray-500">
                    <div className="flex items-center gap-6">
                        <div className="flex items-center gap-2">
                            <UserOutlined className="text-secondary-400 text-base" />
                            <Text className="text-gray-600 font-medium">
                                {letter.author?.showname || '匿名用户'}
                            </Text>
                        </div>

                        {letter.receivers.some(item => item.department?.name) && (
                            <div className="flex items-center gap-2">
                                <BankOutlined className="text-secondary-400 text-base" />
                                <Tooltip title={letter.receivers.map(item => item.department?.name).filter(Boolean).join(', ')}>
                                    <Text className="text-gray-600">
                                        {letter.receivers
                                            .map(item => item.department?.name)
                                            .filter(Boolean)
                                            .slice(0, 2)
                                            .join('、')}
                                        {letter.receivers.filter(item => item.department?.name).length > 2 && ' 等'}
                                    </Text>
                                </Tooltip>
                            </div>
                        )}

                        {letter.receivers.some(item => item.showname) && (
                            <div className="flex items-center gap-2">
                                <SendOutlined className="text-secondary-400 text-base" />
                                <Tooltip title={letter.receivers.map(item => item.showname).filter(Boolean).join(', ')}>
                                    <Text className="text-gray-600">
                                        {letter.receivers
                                            .map(item => item.showname)
                                            .filter(Boolean)
                                            .slice(0, 2)
                                            .join('、')}
                                        {letter.receivers.filter(item => item.showname).length > 2 && ' 等'}
                                    </Text>
                                </Tooltip>
                            </div>
                        )}
                    </div>
                    <div className="flex items-center gap-2">
                        <CalendarOutlined className="text-secondary-400 text-base" />
                        <Text className="text-gray-500">
                            {dayjs(letter.createdAt).format("YYYY-MM-DD")}
                        </Text>
                    </div>
                </div>

                {/* Content Preview */}
                {letter.content && (
                    <Paragraph
                        ellipsis={{ rows: 2 }}
                        className="!mb-4 text-gray-600 flex-1 leading-relaxed text-sm font-sans">
                        {letter.content}
                    </Paragraph>
                )}
                <div className="flex flex-wrap gap-2">
                    <LetterBadge type="state" value={letter.state} />
                    {letter.meta.tags.map(tag => (
                        <LetterBadge key={tag} type="tag" value={tag} />
                    ))}
                </div>
                {/* Badges & Interactions */}
                <div className="flex justify-between items-center ">
                    <div className="flex flex-wrap gap-2">
                        {letter.terms.map(term => (
                            <LetterBadge key={term.name} type="category" value={term.name} />
                        ))}
                    </div>

                    <div className="flex items-center gap-4">
                        <Button
                            type="default"
                            shape="round"
                            icon={<EyeOutlined />}
                        >
                            {letter.views}
                        </Button>
                        <PostLikeButton post={letter as any}></PostLikeButton>
                    </div>
                </div>
            </div>
        </div>
    );
}