import { FC } from 'react'
import { CharacterRoulette } from './components/characters'
import { Inventory } from './components/inventory/index'
import { LoginWidget } from './components/login'

export const App: FC = () => {
  return (
    <>
      <div className="flex flex-row mx-auto p-4 gap-8 w-full h-full">
        <div className="flex flex-col max-w-64">
          <LoginWidget />
          <CharacterRoulette />
        </div>
        <div className="flex-1">
          <Inventory />
        </div>
      </div>
    </>
  )
}

/*
       <div className="flex flex-col p-4 h-full">
        <div className="grid grid-cols-6 gap-x-4">
          <div className="col-span-5 h-full">
            <CharacterRoulette/>
          </div>
          <div className="col-span-1">
            <div className="flex flex-col border border-gray-400">
              <LoginWidget/>
              </div>
          </div>
        </div>
        <div className="grid grid-cols-6 h-full">
          <div className="col-span-1">
          </div>
          <div className="col-span-5 h-full">
            <div className="overflow-hidden h-5/6">
              <Inventory/>
            </div>
          </div>
        </div>
      </div>
*/