import { Button, List } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
export default function ShopEmployeesListComponent({
  loading,
  employees,
  setSelectedEmployee,
  handleDelete
}) {
  const { t } = useTranslation();
  return (
    <div>
      <Button
        type="primary"
        onClick={() => {
          setSelectedEmployee({});
        }}
      >
        {t("employees.actions.new")}
      </Button>
      <List
        loading={loading}
        itemLayout="horizontal"
        dataSource={employees}
        renderItem={item => (
          <List.Item
            actions={[
              <Button key="edit" onClick={() => setSelectedEmployee(item)}>
                {t("general.actions.edit")}
              </Button>,
              <Button key="delete" onClick={() => handleDelete(item.id)}>
                {t("general.actions.delete")}
              </Button>
            ]}
          >
            <List.Item.Meta
              title={`${item.first_name || ""} ${item.last_name ||
                ""} | ${item.employee_number || ""}`}
              description={
                <span>
                  {item.cost_center} @{" "}
                  <CurrencyFormatter>{item.base_rate}</CurrencyFormatter>
                </span>
              }
            />
          </List.Item>
        )}
      />
    </div>
  );
}
