import HistoryChart from "./components/HistoryChart";
import LatestItems from "./components/LatestItems";
import { DashboardConfig } from "./components/Dashboard";
import TopTags from "./components/ProgressCard/TopTags";

export const configuration: DashboardConfig = {
  sections: [
    {
      id: "breakdown",
      title: "Breakdown",
      summary: "Interactive chronological tracking",
      component: HistoryChart,
      settings: {
        tabs: ["Weekly", "Monthly"],
        // tabs: ["Weekly", "Monthly", "Yearly", "Financial Year", "All Time"],
      },
      style: {
        size: 12,
      },
    },
    {
      id: "top-payees",
      title: 'Top Payees',
      component: TopTags,
      settings: {
        compact: true,
      },
      style: {
        size: 12,
      },
    },
    {
      id: "items",
      component: LatestItems,
      style: {
        size: 12,
      },
    },
  ],
  style: {
    palette: {
      expense: {
        light: {
          primary: "#d32f2f",
          background: "#fdecea",
          text: "#b71c1c"
        },
        dark: {
          primary: "#f44336",
          background: "rgba(244, 67, 54, 0.15)",
          text: "#ffcdd2"
        }
      },
      income: {
        light: {
          primary: "#2e7d32",
          background: "#e8f5e9",
          text: "#1b5e20"
        },
        dark: {
          primary: "#4caf50",
          background: "rgba(76, 175, 80, 0.15)",
          text: "#c8e6c9"
        }
      }
    }
  }
};