import React from 'react';
import { Card, Typography, Space } from 'antd';
import { EyeOutlined, UserOutlined } from '@ant-design/icons';
import type { WorkCardProps } from './types';
import { useNavigate } from 'react-router';

const { Text, Title } = Typography;
const { Meta } = Card;

const WorkCard: React.FC<WorkCardProps> = ({ artwork }) => {
    const handleImageError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
        const target = e.target as HTMLImageElement;
        target.src = 'https://via.placeholder.com/300x200?text=No+Image';
    };
    const nav = useNavigate()
    const handleClick = () => {
        nav(`/work/${artwork.id}`)
    }

    const formatViews = (views: number): string => {
        return views.toLocaleString();
    };

    return (
        <Card
            hoverable
            style={{ marginBottom: 16 }}
            cover={
                <img
                    alt={artwork.title}
                    src={artwork.cover}
                    style={{
                        height: 200,
                        objectFit: 'cover',
                        borderRadius: '8px 8px 0 0'
                    }}
                    onError={handleImageError}
                />
            }
            actions={[
                <Space key="views">
                    <EyeOutlined />
                    <Text type="secondary">{formatViews(artwork.views)}</Text>
                </Space>,
                <Space key="author">
                    <UserOutlined />
                    <Text type="secondary">{artwork.author}</Text>
                </Space>,
            ]}
            onClick={handleClick}
        >
            <Meta
                title={
                    <div style={{ marginBottom: 8 }}>
                        <Title level={4} style={{ margin: 0, fontSize: 16 }}>
                            {artwork.title}
                        </Title>
                    </div>
                }
                description={
                    <Space direction="vertical" size="small" style={{ width: '100%' }}>
                        <Text type="secondary" style={{ fontSize: 12 }}>
                            分类: {artwork.category.name}
                        </Text>
                        {artwork.category.children.length > 0 && (
                            <Space wrap size={[4, 4]}>
                                {artwork.category.children.map((child, index) => (
                                    <Text
                                        key={index}
                                        code
                                        style={{
                                            fontSize: 11,
                                            padding: '2px 6px',
                                            backgroundColor: '#f5f5f5',
                                            borderRadius: 4
                                        }}
                                    >
                                        {child}
                                    </Text>
                                ))}
                            </Space>
                        )}
                    </Space>
                }
            />
        </Card>
    );
};

export default WorkCard;