'use client';
import '@/app/globals.css';
import { useState } from 'react';
import { RadarChart } from '../components/charts/radar'
import { EmpireStats } from '../components/tables/empires'
import { Checkbox } from '@nextui-org/react';
import { PopChart } from '@/components/charts/pops';
import { EthicsBar } from '../components/charts/ethicsBar';

export default function Graphs() {
  const [weighted, setWeighted] = useState(true);
  return (
    <main className='charts'>
      <div className='column'>
        <RadarChart weighted={weighted} />
        <Checkbox labelColor="primary" defaultSelected={weighted} onChange={() => setWeighted(!weighted)}>Weighted Ethics</Checkbox>
      </div>
      <EmpireStats />
      <div className='column'>
        <PopChart></PopChart>
        <EthicsBar></EthicsBar>
      </div>
    </main>
  )
}