'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';
import { useLayoutStore } from '@/stores';

const HomePage = () => {
  const tab = useHomeStore((state) => state.tab);
  const response = useLayoutStore((s) => s.response);

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

export default HomePage;
