import React from 'react';
import { Card } from 'antd';
import { useDispatch } from 'react-redux';
import type { Procedure } from '../../../states/patient/viewSelection';
import { addProtocolViews } from '../../../states/patient/viewSelection';

interface ProcedureViewCardProps {
  protocol: Procedure;
  selected?: boolean;
}

const ProcedureViewCard: React.FC<ProcedureViewCardProps> = ({
  protocol,
  selected,
}) => {
  const dispatch = useDispatch();

  const handleClick = () => {
    dispatch(addProtocolViews(protocol));
  };

  return (
    <Card
      hoverable
      style={{
        marginBottom: 12,
        borderColor: selected ? '#1890ff' : undefined,
        boxShadow: selected ? '0 0 0 2px #1890ff33' : undefined,
      }}
      onClick={handleClick}
      title={protocol.ProcedureName}
    >
      <div>
        <div>
          <strong>代码：</strong>
          {protocol.ProcedureCode}
        </div>
        <div>
          <strong>别名：</strong>
          {protocol.ProcedureOtherName}
        </div>
        <div>
          <strong>描述：</strong>
          {protocol.ProcedureDescription}
        </div>
        <div>
          <strong>适用类型：</strong>
          {protocol.PatientType}
        </div>
        {/* 可根据需要展示更多字段 */}
      </div>
    </Card>
  );
};

export default ProcedureViewCard;