'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 { useMedia } from '@/hooks/tools';

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

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

export default HomePage;
