import React from 'react';
import CollapsedContent from '../collapsed-content';
import styled from 'styled-components';
import CollapsableForm from '../../../../common/expand-collapse';
import DynamicTable from '../../DynamicTable';
import { useOrderProductsResources } from '../../store';
import { tableColumns } from '../helper';

function Order() {
  const [orderResources] = useOrderProductsResources();

  const data =
    orderResources?.data && orderResources?.data?.length > 0
      ? orderResources?.data
      : '';

  return (
    <Table>
      <CollapsableForm collapsedContent={<CollapsedContent />}>
        <DynamicTable columns={tableColumns} data={data} />
      </CollapsableForm>
    </Table>
  );
}
const Table = styled.div`
  width: 100%;
`;
export default Order;
