import { useState } from 'react';
import { useAppContext } from '../context/AppContext';
import { MarketplaceTab } from '../tabs/MarketplaceTab';
import { TopVolatile, AISetups } from '../components/MarketOpportunities';
import type { StrategyPreset } from '../lib/PresetRegistry';

export function MarketsView() {
  const { botState, showMarketplaceTab } = useAppContext();
  const [, setClonedPreset] = useState<StrategyPreset | null>(null);

  const handleClone = (preset: StrategyPreset) => setClonedPreset(preset);

  return (
    <div>
      <h2 style={{ fontSize: 22, fontWeight: 800, color: '#111827', margin: '0 0 20px' }}>Markets</h2>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 24 }}>
        <TopVolatile botState={botState} />
        <AISetups botState={botState} />
      </div>
      {showMarketplaceTab && (
        <MarketplaceTab onClone={handleClone} botState={botState} />
      )}
    </div>
  );
}