import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
import { Button, Card, Typography } from "antd";
import dayjs from "dayjs";
import { ShareCodeItem } from "./ShareCodeList";
import { useEffect } from "react";

export default function ShareCodeListCard({ item, onEdit, onDelete }: { item: ShareCodeItem, onEdit: (id: string,expiresAt:Date,canUseTimes:number,code:string) => void, onDelete: (id: string) => void }) {
    useEffect(() => {
        console.log('item:', item);
    }, [item]);
    return <div>
        <Card
            className="shadow-md hover:shadow-lg transition-shadow duration-300 space-x-4"
            title={
                <Typography.Text
                    strong
                    className="text-lg font-semibold text-blue-600"
                >
                    {item.code}
                </Typography.Text>
            }
            hoverable
            actions={[
                <Button
                    type="text"
                    icon={<EditOutlined />}
                    onClick={() => onEdit?.(item.id,dayjs(item.expiresAt).toDate(),item.canUseTimes,item.code)}
                    className="text-blue-500 hover:text-blue-700"
                />,
                <Button
                    type="text"
                    icon={<DeleteOutlined />}
                    onClick={() => onDelete?.(item.id)}
                    className="text-red-500 hover:text-red-700"
                />
            ]}
        >
            <div className="space-y-2">
                <p className="text-gray-700">
                    <span className="font-medium">文件名:</span> {item.fileName}
                </p>
                <p className="text-gray-700">
                    <span className="font-medium">文件大小:</span> {Math.max(0.01, (item?.resource?.meta?.size / 1024 / 1024)).toFixed(2)} MB
                </p>
                <p className="text-gray-700">
                    <span className="font-medium">过期时间:</span> {dayjs(item.expiresAt).format('YYYY-MM-DD HH:mm:ss')}
                </p>
                <p className="text-gray-700">
                    <span className="font-medium">剩余使用次数:</span> {item.canUseTimes}
                </p>
            </div>
        </Card>
    </div>
}