import { motion } from 'framer-motion';
import { MarketOverviewSection } from '@/components/sections/MarketOverview';
import { MarketIndices } from '@/components/sections/MarketIndices';
import { SentimentIndicator } from '@/components/sections/SentimentIndicator';
import { MomentumAnalysis } from '@/components/sections/MomentumAnalysis';
import { HighLowStocks } from '@/components/sections/HighLowStocks';
import { HotNewsSection } from '@/components/sections/HotNews';
import { useMarketOverview } from '@/hooks/useStockData';
import { 
  mockSentimentData, 
  mockMomentumData, 
  mockHighStocks, 
  mockLowStocks, 
  mockPriceDistribution, 
  mockSentimentTrend,
  mockMarketIndices,
  mockHotNews
} from '@/lib/mockData';
import type { Stock, MomentumData } from '@/types';

interface DashboardProps {
  onStockClick?: (stock: Stock) => void;
  onSectorClick?: (sector: MomentumData) => void;
}

export function Dashboard({ onStockClick, onSectorClick }: DashboardProps) {
  const { data: marketData, loading, refresh } = useMarketOverview();

  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.5 }}
      className="space-y-8"
    >
      <MarketIndices indices={mockMarketIndices} />

      <MarketOverviewSection 
        data={marketData} 
        distributionData={mockPriceDistribution}
        loading={loading}
        onRefresh={refresh}
      />

      <HotNewsSection news={mockHotNews} />

      <SentimentIndicator 
        data={mockSentimentData} 
        trendData={mockSentimentTrend}
      />

      <MomentumAnalysis 
        data={mockMomentumData} 
        onSectorClick={onSectorClick}
      />

      <HighLowStocks 
        highStocks={mockHighStocks} 
        lowStocks={mockLowStocks}
        onStockClick={onStockClick}
      />
    </motion.div>
  );
}