import { Table } from "antd";
import React from "react";
import CurrencyFormatterAtom from "../../atoms/currency-formatter/currency-formatter.atom";

export default function JobLinesTableMolecule({ loading, jobLines }) {
  const columns = [
    {
      title: "#",
      dataIndex: "unq_seq",
      key: "unq_seq",
    },
    {
      title: "S#",
      dataIndex: "line_ind",
      key: "line_ind",
    },
    {
      title: "Line Description",
      dataIndex: "line_desc",
      key: "line_desc",
    },
    {
      title: "Part Type",
      dataIndex: "part_type",
      key: "part_type",
    },
    {
      title: "Part Number",
      dataIndex: "oem_partno",
      key: "oem_partno",
    },
    {
      title: "Database Price",
      dataIndex: "db_price",
      key: "db_price",

      render: (text, record) => (
        <CurrencyFormatterAtom>{record.db_price}</CurrencyFormatterAtom>
      ),
    },
    {
      title: "Actual Price",
      dataIndex: "act_price",
      key: "act_price",

      render: (text, record) => (
        <CurrencyFormatterAtom>{record.act_price}</CurrencyFormatterAtom>
      ),
    },
    {
      title: "Qty.",
      dataIndex: "part_qty",
      key: "part_qty",
    },
  ];

  return (
    <div>
      <Table
        columns={columns}
        rowKey="id"
        loading={loading}
        size="small"
        pagination={false}
        dataSource={jobLines}
        scroll={{
          x: true,
          //y: "40rem"
        }}
      />
    </div>
  );
}
