import { useRouteLoaderData } from 'react-router'

import { Card } from '~/components/ui/card'
import { CarouselHero } from '~/components/ui/carousel-hero'
import { CarouselSection } from '~/components/ui/carousel-section'
import { Newsletter } from '~/components/ui/newsletter'
import type { loader } from '~/routes/_news._index'
import type { TNews } from '~/types/news'

export const NewsPage = () => {
  const loaderData = useRouteLoaderData<typeof loader>('routes/_news._index')
  const spotlight: TNews = {
    title: loaderData?.spotlightCategory?.name || '',
    description: loaderData?.spotlightCategory?.description || '',
    items: loaderData?.spotlightNews || [],
  }
  const berita: TNews = {
    title: loaderData?.beritaCategory?.name || '',
    description: loaderData?.beritaCategory?.description || '',
    items: loaderData?.beritaNews || [],
  }
  const kajian: TNews = {
    title: loaderData?.kajianCategory?.name || '',
    description: loaderData?.kajianCategory?.description || '',
    items: loaderData?.kajianNews || [],
  }

  return (
    <div className="relative">
      <Card>
        <CarouselHero {...spotlight} />
      </Card>
      <div className="min-h-[400px] sm:min-h-[300px]">
        <Newsletter className="mr-0 sm:-ml-14" />
      </div>

      <Card>
        <CarouselSection {...berita} />
      </Card>
      <Card>
        <CarouselSection {...kajian} />
      </Card>
    </div>
  )
}