'use client'

import Header from './components/Header'
import HomePageFooter from './components/HomePageFooter'
import Story from './components/Story'
import Character from './components/Character'
import Filter from './components/Filter'
import { useHomeStore } from './store'

const HomePage = () => {
  const tab = useHomeStore((state) => state.tab)

  return (
    <>
      <div className="text-txt-primary-normal relative px-16 pb-32">
        <div className="mx-auto max-w-[1136px]">
          <Header />
          <Filter />
          {tab === 'story' ? <Story /> : <Character />}
        </div>
      </div>
      <HomePageFooter />
    </>
  )
}

export default HomePage