import React from 'react';
import { AntTable } from '@bjsdistribution/dms-component-library';
import styled from 'styled-components';
import { DefectsData } from '../utils';
const DefectsModal = () => {
  const options = [
    { value: 'bjsCouriers', label: 'BJS COURIERS' },
    { value: 'bjsSales', label: 'BJS SALES' },
    { value: 'test', label: 'TEST' },
  ];

  const columns = [
    { key: 'action', title: 'Action' },
    { key: 'type', title: 'Type' },
    { key: 'primary_position', title: 'Primary Position' },
    { key: 'secondary_position', title: 'Secondary Position' },
    { key: 'tertiary_position', title: 'Tertiary Position' },
    { key: 'primary_details', title: 'Primary Details' },
    { key: 'secondary_details', title: 'Secondary Details' },
    { key: 'created_by', title: 'Created By' },
    { key: 'date', title: 'Date' },
    { key: 'images', title: 'Images' },
  ];
  return (
    <>
      <GLobalPopupContent>
        <StyledConatiner>
          <AntTable
            columns={columns}
            data={DefectsData}
            selectOptions={options}
            onSelectChange={(value: any, record: any) =>
              console.log('Selected value:', value, 'for record:', record)
            }
          />
        </StyledConatiner>
      </GLobalPopupContent>
    </>
  );
};
const StyledConatiner = styled.div`
  /* tex: nowrap; */
`;
export default DefectsModal;
const GLobalPopupContent = styled.div``;
