import React from 'react'
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from './components/CustomTabs'
import { useGameTick } from './hooks/useGameTick'
import Field from './components/Field'
import Warehouse from './components/Warehouse'
import Market from './components/Market'
import Temple from './components/Temple'
import { ActionCooldown } from './components/ActionCooldown'
import { useSaveSystem } from './store/useSaveSystem'
import { Console } from './components/Console'

const appContainerStyle: React.CSSProperties = {
  maxWidth: '1200px',
  margin: '0 auto',
  padding: '2rem',
}

const tabsListStyles: React.CSSProperties = {
  display: 'grid',
  width: '100%',
  gridTemplateColumns: 'repeat(4, 1fr)',
}

function App() {
  useGameTick()
  useSaveSystem()

  return (
    <div>
      <ActionCooldown />
      <div style={appContainerStyle}>
        <Tabs defaultValue="fields">
          <TabsList style={tabsListStyles}>
            <TabsTrigger value="fields">Fields</TabsTrigger>
            <TabsTrigger value="warehouse">Warehouse</TabsTrigger>
            <TabsTrigger value="market">Market</TabsTrigger>
            <TabsTrigger value="temple">Temple</TabsTrigger>
          </TabsList>
          <TabsContent value="fields">
            <Field />
          </TabsContent>
          <TabsContent value="warehouse">
            <Warehouse />
          </TabsContent>
          <TabsContent value="market">
            <Market />
          </TabsContent>
          <TabsContent value="temple">
            <Temple />
          </TabsContent>
        </Tabs>
        <Console />
      </div>
    </div>
  )
}

export default App