import * as React from 'react';
import './AppCard.less';

export interface AppCardProps {
    id: string;
    name: string;
    description: string;
    icon?: string;
    iconImage?: string;
    iconBgColor?: 'blue' | 'indigo' | 'teal' | 'purple' | 'rose' | 'cyan' | 'amber';
    tags?: Array<{
        label: string;
        color: 'slate' | 'blue' | 'indigo' | 'teal' | 'purple' | 'rose' | 'cyan' | 'amber';
    }>;
    certification?: string;
    isHot?: boolean;
    onPlay?: () => void;
    onShare?: () => void;
    onFavorite?: () => void;
}

const AppCard: React.FC<AppCardProps> = (props) => {
    const {
        id,
        name,
        description,
        icon,
        iconImage,
        iconBgColor = 'blue',
        tags = [],
        certification,
        isHot,
        onPlay,
        onShare,
        onFavorite,
    } = props;

    return (
        <div className='app-card'>
            {isHot && (
                <span className='card-hot-badge'>Hot</span>
            )}

            <div className='card-header'>
                <div className={`card-icon-wrapper bg-${iconBgColor}`}>
                    {iconImage ? (
                        <img alt={name} className='card-icon' src={iconImage} />
                    ) : icon ? (
                        <span className='iconify' data-icon={icon}></span>
                    ) : null}
                </div>

                <div className='card-actions'>
                    <button 
                        className='card-action-btn'
                        onClick={(e) => {
                            e.stopPropagation();
                            onShare?.();
                        }}
                        title='分享'
                    >
                        <span className='iconify' data-icon='solar:share-linear'></span>
                    </button>
                    <button 
                        className='card-action-btn'
                        onClick={(e) => {
                            e.stopPropagation();
                            onFavorite?.();
                        }}
                        title='收藏'
                    >
                        <span className='iconify' data-icon='solar:star-linear'></span>
                    </button>
                </div>
            </div>

            <h5 className='card-title'>{name}</h5>

            <p className='card-description'>{description}</p>

            {tags.length > 0 && (
                <div className='card-tags'>
                    {tags.map((tag, index) => (
                        <span key={index} className={`card-tag tag-${tag.color}`}>
                            {tag.label}
                        </span>
                    ))}
                </div>
            )}

            <div className='card-footer'>
                {certification && (
                    <div className='card-certification'>
                        <span className='iconify' data-icon='solar:verified-check-bold'></span>
                        <span>{certification}</span>
                    </div>
                )}

                <button 
                    className='card-play-btn'
                    onClick={(e) => {
                        e.stopPropagation();
                        onPlay?.();
                    }}
                    title='立即使用'
                >
                    <span className='iconify' data-icon='solar:play-bold'></span>
                </button>
            </div>
        </div>
    );
};

export default AppCard;
