import DefaultLayout from "./DefaultLayout";
import { Col, Row, Input, Empty, Button, ConfigProvider } from "antd";

const { Search } = Input;

const SimpleTableLayout = ({
  breadcrumbItems,
  multipleButtonData,
  searchPlaceholder = "Búsqueda",
  searchLoading,
  onSearchClicked,
  children,
  emptyText = "Aún no hay registros.",
  withSearchButton = true,
  searchProps,
}) => {
  return (
    <DefaultLayout breadcrumbItems={breadcrumbItems}>
      <Row style={{ justifyContent: "space-between" }}>
        {withSearchButton && (
          <Col
            xs={{ span: 24 }}
            sm={{ span: 24 }}
            md={{ span: 10 }}
            lg={{ span: 10 }}
            xxl={{ span: 10 }}
          >
            <Search
              placeholder={searchPlaceholder}
              enterButton="Buscar"
              style={{ width: "100%", marginBottom: 10 }}
              loading={searchLoading}
              onSearch={onSearchClicked}
              {...searchProps}
            />
          </Col>
        )}

        {multipleButtonData ? (
          <div className="ed-lista-botones">
            {multipleButtonData.map((item, index) => (
              <Button
                key={index}
                tabIndex={index}
                style={{ backgroundColor: item.color, color: item.texColor }}
                onClick={item.to ? item.to : undefined}
                {...item.props}
                block
              >
                {item.icon} {item.text}
              </Button>
            ))}
          </div>
        ) : null}
      </Row>

      <ConfigProvider
        renderEmpty={() => (
          <Empty
            style={{ height: 300, paddingTop: "5%" }}
            description={emptyText}
          />
        )}
      >
        {children}
      </ConfigProvider>
    </DefaultLayout>
  );
};

export default SimpleTableLayout;
