import * as React from "react";
import {
  ReportData,
  GroupKey,
} from "../../features/report";

export type DashboardMode = "expense" | "income";
export type DashboardPeriodType = "rolling" | "calendar";
export type DashboardSelectedPeriodId = string | null;

export interface DashboardState {
  mode: DashboardMode;
  periodType: DashboardPeriodType;
  selectedPeriodId: DashboardSelectedPeriodId;
  selectedGroupKey: GroupKey | null;
  comparison: boolean;
}

export interface DashboardSection {
  id: string;
  title?: string;
  summary?: string;
  component: React.ComponentType<any>;
  settings?: Record<string, any>;
  isList?: boolean;
  style?: {
    size?: number;
    [key: string]: any;
  };
}

export interface ColorDefinition {
  primary: string;
  background?: string;
  text?: string;
}

export interface ThemeAwarePalette {
  light: ColorDefinition;
  dark: ColorDefinition;
}

export interface DashboardConfig {
  sections: DashboardSection[];
  style?: {
    palette?: Record<DashboardMode, ThemeAwarePalette>;
  };
}

export interface DashboardProps {
  config: DashboardConfig;
  data: ReportData;
}