import React from "react";
import { useTranslation } from "react-i18next";
import { Table, Button } from "antd";
export default function ProfileShopsComponent({
  loading,
  data,
  updateActiveShop
}) {
  const { t } = useTranslation();

  const columns = [
    {
      title: t("associations.fields.shopname"),
      dataIndex: "shopname",
      key: "shopname",
      width: "25%",
      render: (text, record) => <span>{record.bodyshop.shopname}</span>
    },
    {
      title: t("associations.fields.active"),
      dataIndex: "active",
      key: "active",
      width: "25%",
      render: (text, record) => <span>{record.active ? "Yes" : "No"}</span>
    },
    {
      title: t("associations.labels.actions"),
      dataIndex: "actions",
      key: "actions",
      width: "25%",
      render: (text, record) => (
        <span>
          {record.active ? null : (
            <Button onClick={() => updateActiveShop(record.id)}>
              Activate
            </Button>
          )}
        </span>
      )
    }
  ];

  return (
    <Table
      loading={loading}
      size="small"
      columns={columns.map(item => ({ ...item }))}
      rowKey="id"
      dataSource={data}
    />
  );
}
