import React from "react";
import { Button, PageHeader, Card, Row, Col, List } from "antd";
import { store } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { FilterOutlined, TransactionOutlined } from "@ant-design/icons";

export const Home = observer(() => {
  return (
    <div>
      {store.ui.mediaQuery.isDesktop && (
        <Row
          style={{
            marginTop: 30,
            marginLeft: 30,
          }}
        >
          <Card
            className={"shadow"}
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              width: "30%",
            }}
          >
            <PageHeader title={<span>Total Transaksi</span>}>
              <span>Total Transaksi : 25 Transaksi</span>
            </PageHeader>
          </Card>
          <Card
            className={"shadow"}
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              width: "30%",
            }}
          >
            <PageHeader title={<span>Total Keuntungan</span>}>
              <span>Rp.30.000.000</span>
            </PageHeader>
          </Card>
          <Card
            className={"shadow"}
            hoverable
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              width: "30%",
            }}
          >
            <PageHeader title={<span>Saldo</span>}>
              <span>Rp.200.000.000 </span>
            </PageHeader>
          </Card>
        </Row>
      )}
      {store.ui.mediaQuery.isMobile && (
        <div style={{ marginTop: 10 }}>
          <Card
            className={"shadow"}
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              marginRight: 20,
            }}
          >
            <PageHeader title={<span>Total Transaksi</span>}>
              <span>Total Transaksi :</span>
            </PageHeader>
          </Card>
          <Card
            className={"shadow"}
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              marginRight: 20,
            }}
          >
            <PageHeader title={<span>Total Keuntungan</span>}>
              <span>Rp.30.000.000</span>
            </PageHeader>
          </Card>
          <Card
            className={"shadow"}
            hoverable
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              marginRight: 20,
            }}
          >
            <PageHeader title={<span>Saldo</span>}>
              <span>Rp.200.000.000 </span>
            </PageHeader>
          </Card>
        </div>
      )}
    </div>
  );
  // return <div className={["ppob-container"].join(" ")}>
  //     <PageHeader
  //         style={{
  //             padding: 0,
  //             margin: 0,
  //             height: 40,
  //             backgroundColor: "transparent",
  //         }}
  //         title={"Home"}
  //     >
  //     </PageHeader>
  //     <Button onClick={() => {
  //         store.ui.setTestValue();
  //     }}>{store.ui.testValue}</Button>
  //     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aut recusandae velit! Consequatur corporis,
  //     eum fuga, harum incidunt laboriosam minus necessitatibus neque non nostrum pariatur tempore. Dignissimos impedit
  //     rem tempora!
  // </div>
});