import mockData from "../data/mockData";
import MetricCards from "../components/MetricCards";
import Table from "../components/Table";
import StatCharts from "../components/StatCharts";
import styles from "../styles/dashboard.module.css";

function formatCurrency(amount: number) {
  return amount.toLocaleString("ru-RU", {
    style: "currency",
    currency: "RUB",
    minimumFractionDigits: 0,
  });
}

export default function DashboardPage() {
  return (
    <div className={styles.dashboard}>
      <h1 className={styles.title}>Дашборд</h1>
      <MetricCards  />
      <StatCharts />
      {/* <div className={styles.tableBlock}>
        <h3 className={styles.tableTitle}>Последние продажи</h3>
        <Table
          headers={["ID реферала", "Агент", "Сумма продажи", "Комиссия", "Дата", "Статус"]}
          data={mockData.dashboard.recentSales}
          renderRow={(sale: any, index: number) => (
            <tr key={index}>
              <td>{sale.id}</td>
              <td>{sale.agent}</td>
              <td>{formatCurrency(sale.amount)}</td>
              <td>{formatCurrency(sale.commission)}</td>
              <td>{sale.date}</td>
              <td>
                <span className={sale.status === "Выплачено" ? styles.statusPaid : styles.statusPending}>
                  {sale.status}
                </span>
              </td>
            </tr>
          )}
        />
      </div> */}
    </div>
  );
}