import React from 'react';
import { Card, Image, Badge } from 'antd';
import { View } from '@/API/patient/viewActions';
import { getViewIconUrl } from '@/API/bodyPosition';

interface AppendViewCardProps {
  view: View;
  isSelected: boolean;
  onClick: (view: View) => void;
}

const AppendViewCard: React.FC<AppendViewCardProps> = ({
  view,
  isSelected,
  onClick,
}) => {
  return (
    <Badge.Ribbon
      text="已选"
      color="green"
      style={{ display: isSelected ? 'block' : 'none' }}
    >
      <Card
        hoverable
        onClick={() => onClick(view)}
        className={`cursor-pointer transition-all ${
          isSelected
            ? 'border-4 border-[var(--color-primary)] shadow-lg'
            : 'border-2 border-gray-200'
        }`}
        cover={
          <Image
            alt={view.view_name}
            src={getViewIconUrl(view.view_icon_name || view.view_coach_name)}
            preview={false}
            style={{
              width: '100%',
              height: '120px',
              objectFit: 'contain',
              padding: '10px',
            }}
          />
        }
      >
        <Card.Meta
          title={
            <div className="text-center text-sm font-medium truncate">
              {view.view_name}
            </div>
          }
          description={
            <div className="text-center text-xs text-gray-500 truncate">
              {view.view_description}
            </div>
          }
        />
      </Card>
    </Badge.Ribbon>
  );
};

export default AppendViewCard;