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 toast from "react-hot-toast";
import { useState } from "react";
import { getBadgeStyle } from "@web/src/app/main/letter/list/utils";
import { PostDto } from "@nice/common";
import dayjs from "dayjs";
import PostLikeButton from "./detail/PostHeader/PostLikeButton";
const { Title, Paragraph, Text } = Typography;

interface LetterCardProps {
    letter: PostDto;
}

export function LetterCard({ letter }: LetterCardProps) {


    return (
        <div className="w-full p-4 bg-white transition-all duration-300 ease-in-out   group">
            <div className="flex flex-col gap-3">
                {/* Title & Priority */}
                <div className="flex justify-between items-start">
                    <Title level={4} className="!mb-0 flex-1">
                        <a
                            href={`/${letter.id}/detail`}
                            target="_blank"
                            className="text-primary transition-all duration-300 relative
                            before:absolute before:bottom-0 before:left-0 before:w-0 before:h-[2px] before:bg-primary-600
                            group-hover:before:w-full before:transition-all before:duration-300
                            group-hover:text-primary-600 group-hover:scale-105 group-hover:drop-shadow-md">
                            {letter.title}
                        </a>
                    </Title>
                </div>

                {/* Meta Info */}
                <div className="flex justify-between items-center text-sm  text-secondary">
                    <Space size="middle">
                        <Space>
                            <UserOutlined className=" text-secondary-400"></UserOutlined>
                            <Text>
                                {letter.author?.showname || '匿名用户'}
                            </Text>
                        </Space>
                        <Space>
                            <BankOutlined className="text-secondary-400" />
                            <Text>{letter.receivers.map(item => item.department?.name).toString()}</Text>
                        </Space>
                        <Space>
                            <SendOutlined className=" text-secondary-400"></SendOutlined>
                            <Text >
                                {letter.receivers.map(item => item.showname).toString()}
                            </Text>
                        </Space>
                    </Space>
                    <Space>
                        <CalendarOutlined className="text-secondary-400" />
                        <Text type="secondary">
                            {dayjs(letter.createdAt).format("YYYY-MM-DD")}
                        </Text>
                    </Space>
                </div>

                {/* Content Preview */}
                {letter.content && (
                    <div className="flex items-start gap-2">
                        <FileTextOutlined className="text-gray-400 mt-1" />
                        <Paragraph
                            ellipsis={{ rows: 2 }}
                            className="!mb-3 text-gray-600 flex-1">
                            {letter.content}
                        </Paragraph>
                    </div>
                )}

                {/* Badges & Interactions */}
                <div className="flex justify-between items-center">
                    <Space size="small" wrap className="flex-1">
                        <Badge type="category" value={"11"} />
                        <Badge type="status" value={"22"} />
                    </Space>

                    <div className="flex items-center gap-4">
                        <div className="flex items-center gap-1 text-gray-500">
                            <EyeOutlined className="text-lg" />
                            <span className="text-sm">{letter.views}</span>
                        </div>
                        <PostLikeButton post={letter as any}></PostLikeButton>
                    </div>
                </div>
            </div>
        </div>
    );
}

export function Badge({
    type,
    value,
    className = "",
}: {
    type: "priority" | "category" | "status";
    value: string;
    className?: string;
}) {
    return (
        value && (
            <span
                className={`
                inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                ${getBadgeStyle(type, value)}
                transition-all duration-200 ease-in-out transform hover:scale-105
                ${className}
            `}>
                {value?.toUpperCase()}
            </span>
        )
    );
}