import React from "react";
import { Space, Card, Typography, Flex } from "antd";
import HostInformation from "../components/HostInformation.jsx";
import PrinterIcon from "../icons/PrinterIcon.jsx";
import HostIcon from "../icons/HostIcon.jsx";
import DocumentPrinterIcon from "../icons/DocumentPrinterIcon.jsx";
import PrinterList from "../components/PrinterList.jsx";

const { Text } = Typography;

const Overview = ({ loading, host, printers, documentPrinters }) => {
  return (
    <Flex
      vertical
      size="large"
      style={{ width: "100%", height: "100%" }}
      gap={"middle"}
    >
      <Card
        title={
          <Space>
            <HostIcon />
            Host Information
          </Space>
        }
        size="small"
        style={{ minWidth: "400px", flexShrink: 1 }}
      >
        <HostInformation
          host={host}
          size={"small"}
          column={{ xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }}
        />
      </Card>
      <Flex gap={"middle"} wrap style={{ flexGrow: 1 }}>
        <Card
          title={
            <Space>
              <PrinterIcon />
              Printers
            </Space>
          }
          size="small"
          style={{ minWidth: "400px", flexGrow: 1, flex: "1 1 0%" }}
        >
          <PrinterList printers={printers} type="printer" />
        </Card>
        <Card
          title={
            <Space>
              <DocumentPrinterIcon />
              Document Printers
            </Space>
          }
          size="small"
          style={{ minWidth: "400px", flexGrow: 1, flex: "1 1 0%" }}
        >
          <PrinterList printers={documentPrinters} type="documentPrinter" />
        </Card>
      </Flex>
    </Flex>
  );
};

Overview.propTypes = {};

export default Overview;
