import { DefaultLayout } from '@/frame/components/DefaultLayout'
import { useLandingContext } from '@/landings/context/LandingContext'
import { LandingHero } from '@/landings/components/shared/LandingHero'
import { ArticleGrid } from '@/landings/components/shared/LandingArticleGridWithFilter'
import { LandingCarousel } from '@/landings/components/shared/LandingCarousel'
import { UtmPreserver } from '@/frame/components/UtmPreserver'
import { useMultiQueryParams } from '@/search/components/hooks/useMultiQueryParams'

export const DiscoveryLanding = () => {
  const {
    title,
    intro,
    heroImage,
    introLinks,
    tocItems,
    recommended,
    includedCategories,
    landingType,
  } = useLandingContext()
  const { params, updateParams } = useMultiQueryParams({
    useHistory: true,
    excludeFromHistory: ['articles-filter'],
  })

  return (
    <DefaultLayout>
      <UtmPreserver />
      <div>
        <LandingHero title={title} intro={intro} heroImage={heroImage} introLinks={introLinks} />
        <div className="container-xl px-3 px-md-6 mt-6 mb-4">
          <LandingCarousel recommended={recommended} />
          <ArticleGrid
            tocItems={tocItems}
            includedCategories={includedCategories}
            landingType={landingType}
            params={params}
            updateParams={updateParams}
          />
        </div>
      </div>
    </DefaultLayout>
  )
}