import { Toaster } from "sonner";
import HistoryList from "../components/HistoryList/HistoryList.tsx";
import HitSearchCard from "../components/SessionForm/HitSearchCard.tsx";
import SessionCard from "../components/SessionForm/SessionCard.tsx";
import { useAlertHitContext } from "../context/AlertHitContext.ts";
import { SightingFeedProvider } from "../context/providers/SightingFeedProvider.tsx";

const Session = () => {
  useAlertHitContext();

  return (
    <SightingFeedProvider>
      <div className="mx-auto grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-2 px-1 sm:px-2 lg:px-0 w-full">
        <div className="grid grid-cols-1 lg:grid-cols-8 col-span-2 w-full">
          <HitSearchCard />
          <SessionCard />
        </div>
        <div className="col-span-2">
          <HistoryList />
        </div>
        <Toaster />
      </div>
    </SightingFeedProvider>
  );
};

export default Session;
