import React, { useRef } from 'react';
import { useCardAnimation, UseCardAnimationOptions } from '@/hooks/useCardAnimation';

export interface DashboardStat {
  label: string;
  value: string | number;
}

export interface DashboardSidebarItem {
  label: string;
  icon?: any;
  active?: boolean;
}

export interface DashboardListItem {
  label: string;
  value?: string;
}

export interface DashboardProps {
  title?: string;
  stats?: DashboardStat[];
  logoIcon?: any;
  sidebarItems?: DashboardSidebarItem[];
  searchPlaceholder?: string;
  buttons?: Array<{ text: string; onClick?: () => void; href?: string }>;
  chartTitle?: string;
  chartData?: Array<{ label: string; value: number }>;
  listItems?: DashboardListItem[];
  containerClassName?: string;
  headerClassName?: string;
  statsClassName?: string;
  sidebarClassName?: string;
  contentClassName?: string;
  listClassName?: string;
}

export const Dashboard: React.FC<DashboardProps> = ({
  title,
  containerClassName = '',
  ...props
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);

  const animationOptions: UseCardAnimationOptions = {
    containerRef,
    itemRefs,
  };

  const { } = useCardAnimation(animationOptions);

  return (
    <div ref={containerRef} className={containerClassName}>
      {title && <h1>{title}</h1>}
    </div>
  );
};

export default Dashboard;
