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

const AdminAnalyticsWrapper: 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 Remittances"
          description="Combined remittances value of all time"
          value={795394000}
        />

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

        <AnalyticsCard 
          type="save"
          title="Total Pastors"
          description="All ordained pastors count"
          count={150}
        />

        <AnalyticsCard 
          type="save"
          title="Total Ministers"
          description="All ordained ministers count"
          count={1500}
        />

        <AnalyticsCard 
          type="save"
          title="Total Projects"
          description="Projects count"
          count={27}
        />
      </div>
    </div>
  );
};

export default AdminAnalyticsWrapper;