import HeaderSearch from '@/components/layout/header/header-search';
import FeaturedMarketHero from '@/components/user/dashboard/featured-market-hero';
import HotMarkets from '@/components/user/dashboard/hot-markets';
import AnnouncementsSection from '@/components/user/default/announcements-section';
import { useApiSWR } from '@/hooks/useSWR';
import { TMarket } from '@/types/market.types';

export type FeaturedMarketProps = Record<string, never>;

export default function FeaturedMarketSection() {
  const { data, isLoading } = useApiSWR<{ data: TMarket[] }>(
    '/markets?filter[is_featured]=1&filter[status]=open&limit=1',
  );
  const market = data?.data?.[0] ?? null;

  return (
    <div className="container px-4 py-6">
      <HeaderSearch hideDesktop />
      <AnnouncementsSection />
      <div className="grid grid-cols-1 gap-4 lg:grid-cols-8">
        <FeaturedMarketHero market={market} isLoading={isLoading} />
        <HotMarkets />
      </div>
    </div>
  );
}