import React from 'react';
import styles from "./analytics.module.scss";
import AnalyticsCard from "../analytics-card";
import PageIntro from "../page-intro";

const AnalyticsWrapper: React.FC = () => {
  return (
    <div className={styles["analytics"]}>
      <div className={styles["analytics--header"]}>
        <PageIntro 
          title="Performance Overview"
          description="Quickly see performance metrics at a glance"
        />
      </div>

      <div className={styles["analytics__grid"]}>
        <AnalyticsCard
          type="save"
          title="Total Sales"
          description="Combined offerings/givings value"
          value={795394000}
        />

        <AnalyticsCard 
          type="others"
          title="Total Expenses"
          description="Combined expenses value of all time"
          value={355000537}
        />

        <AnalyticsCard 
          type="invest"
          title="Projects Costs"
          description="Cost of church building projects"
          value={555000537}
        />

        <AnalyticsCard 
          type="others"
          title="Total Staff"
          description="Staff by censers headquarters"
          count={1500}
        />

        <AnalyticsCard 
          type="save"
          title="Total Members"
          description="Members count across all branches"
          count={755000}
        />
      </div>
    </div>
  );
};

export default AnalyticsWrapper;