import { ProColumns, ProTable } from '@ant-design/pro-components';
import React from 'react';

interface TripFishingGearTableProps {
  fishingGears: API.FishingGear[];
}

const TripFishingGearTable: React.FC<TripFishingGearTableProps> = ({
  fishingGears,
}) => {
  const fishing_gears_columns: ProColumns<API.FishingGear>[] = [
    {
      title: <div style={{ textAlign: 'center' }}>Tên</div>,
      dataIndex: 'name',
      valueType: 'select',
      align: 'center',
    },
    {
      title: <div style={{ textAlign: 'center' }}>Số lượng</div>,
      dataIndex: 'number',
      align: 'center',
    },
  ];

  return (
    <ProTable<API.FishingGear>
      columns={fishing_gears_columns}
      dataSource={fishingGears}
      search={false}
      pagination={{
        pageSize: 5,
        showSizeChanger: true,
        showTotal: (total, range) => `${range[0]}-${range[1]} trên ${total}`,
      }}
      options={false}
      // bordered                               
      size="middle"
      scroll={{ x: '100%' }}
      style={{ flex: 1 }}
    />
  );
};

export default TripFishingGearTable;
