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

export const Home = observer(() => {
  return (
    <div>
      {store.ui.mediaQuery.isDesktop && (
        <Row
          style={{
            marginTop: 30,
            marginLeft: 30,
          }}
        >
          <Card
            className={"shadow"}
            hoverable
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              borderColor: "salmon",
              width: "30%",
            }}
          >
            <Row>
              <BarChartOutlined style={{ fontSize: 30 }} />
              <PageHeader title={<span>Total Transaksi</span>}>
                <span>Total Transaksi : 25 Transaksi</span>
              </PageHeader>
            </Row>
          </Card>
          <Card
            className={"shadow"}
            hoverable
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              borderColor: "salmon",
              width: "30%",
            }}
          >
            <Row>
              <DropboxOutlined style={{ fontSize: 30 }} />
              <PageHeader title={<span>Total Keuntungan</span>}>
                <span>
                  {new Intl.NumberFormat("id-ID", {
                    style: "currency",
                    currency: "IDR",
                  }).format(store.authentication.profileData?.wallet || 0)}
                </span>
              </PageHeader>
            </Row>
          </Card>
          <Card
            className={"shadow"}
            hoverable
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              borderColor: "salmon",
              width: "30%",
            }}
          >
            <Row>
              <DollarCircleOutlined style={{ fontSize: 30 }} />
              <PageHeader title={<span>Saldo</span>}>
                <span>
                  {new Intl.NumberFormat("id-ID", {
                    style: "currency",
                    currency: "IDR",
                  }).format(store.authentication.profileData?.wallet || 0)}
                </span>
              </PageHeader>
            </Row>
          </Card>
        </Row>
      )}
      {store.ui.mediaQuery.isMobile && (
        <div style={{ marginTop: 10 }}>
          <Card
            className={"shadow"}
            hoverable
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              marginRight: 20,
              borderColor: "salmon",
            }}
          >
            <Row>
              <BarChartOutlined style={{ fontSize: 30 }} />
              <PageHeader title={<span>Total Transaksi</span>}>
                <span>Total Transaksi : 25 Transaksi</span>
              </PageHeader>
            </Row>
          </Card>
          <Card
            className={"shadow"}
            hoverable
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              marginRight: 20,
              borderColor: "salmon",
            }}
          >
            <Row>
              <DropboxOutlined style={{ fontSize: 30 }} />
              <PageHeader title={<span>Total Keuntungan</span>}>
                <span>Rp.30.000.000</span>
              </PageHeader>
            </Row>
          </Card>
          <Card
            className={"shadow"}
            hoverable
            style={{
              marginLeft: 20,
              height: 200,
              marginBottom: 10,
              marginRight: 20,
              borderColor: "salmon",
            }}
          >
            <Row>
              <DollarCircleOutlined style={{ fontSize: 30 }} />
              <PageHeader title={<span>Saldo</span>}>
                <span>Rp.200.000.000 </span>
              </PageHeader>
            </Row>
          </Card>
        </div>
      )}
    </div>
  );
});