import { Card } from 'antd';
import React from 'react';
import EnhancedProTable from '@/components/EnhancedProTable';
import type { TradeExtendServeInfo } from '@/services/trade/order/detail';
import type { ItemConfig } from '../../../../order-info';
import { baseOrderColumns } from './config';

const ExtendServicePet: React.FC<ItemConfig<TradeExtendServeInfo[][]>> = (
  props,
) => {
  const { data = [] } = props;
  return (
    <Card title="可选服务">
      <div style={{ display: 'flex', gap: '16px', flexDirection: 'column' }}>
        {data.map((item, index) => (
          <EnhancedProTable<TradeExtendServeInfo>
            key={`${index}-${Math.random()}`}
            columns={baseOrderColumns}
            dataSource={item}
            showIndex={false}
            size="small"
            search={false}
            showActions={false}
            showSelection={false}
            bordered
            pagination={false}
          />
        ))}
      </div>
    </Card>
  );
};

export default React.memo(ExtendServicePet);
