import React, { useState } from 'react'
import DatasetSelector from './DatasetSelector'
import LeaderboardTable from './LeaderboardTable'
import DataChart from './DataChart'

const LeaderBoardPage: React.FC = () => {
  const datasets = [
    'voxpopuli_1k_audio',
    'ravdess_1k_audio',
    'val2014_1k_image',
    'sav_val_full_video',
  ]
  const [selectedDataset, setSelectedDataset] = useState('voxpopuli_1k_audio')

  return (
    <div className="space-y-6">
      <DatasetSelector
        datasets={datasets}
        selectedDataset={selectedDataset}
        onDatasetChange={setSelectedDataset}
      />

      <div className="space-y-8">
        <LeaderboardTable dataset={selectedDataset} />
        <div className="mt-8 pt-4 border-t border-gray-200">
          <h3 className="text-lg font-semibold mb-4">Performance Chart</h3>
          <DataChart dataset={selectedDataset} />
        </div>
      </div>
    </div>
  )
}

export default LeaderBoardPage