import { BarChart } from "../components/shared/BarChart";
import { StatCard } from "../components/shared/StatCard";
import { TransactionList } from "../components/shared/TransactionList";
import { dashboardData } from "../data/mockData";

export function DashboardPage({ role }) {
  const content = dashboardData[role] || dashboardData.owner;

  return (
    <div className="content-grid">
      <section className="page-heading">
        <h2>{content.title}</h2>
        <p>{content.subtitle}</p>
      </section>

      <section className="stats-grid">
        {content.stats.map((item) => (
          <StatCard key={item.label} {...item} />
        ))}
      </section>

      <section className="dual-grid">
        <div className="card donut-card">
          <h3>{role === "ministry_finance" ? "Revenue & Tax Snapshot" : "Workflow Breakdown"}</h3>
          <div className="donut-shell">
            <div className={`donut donut-${role}`} />
          </div>
          <div className="legend">
            <span>pending</span>
            <span>paid</span>
            <span>completed</span>
          </div>
        </div>
        <BarChart title={content.chartTitle} items={content.bars} />
      </section>

      <TransactionList role={role} title={content.listTitle} />
    </div>
  );
}
