'use client';

import { useState, useEffect } from 'react';
import { HeroSection } from '@/components/home/HeroSection';
import { FeaturesSection } from '@/components/home/FeaturesSection';
import { TopProfessionals } from '@/components/home/TopProfessionals';
import { TestimonialsSection } from '@/components/home/TestimonialsSection';
import { cmsService } from '@/services/cms.service';
import type { HeroContent, FeaturesContent, TopProfessionalsContent, TestimonialsContent, CmsContentRecord } from '@/types/cms';

export default function UserDashboard() {
  const [cmsData, setCmsData] = useState<Record<string, unknown>>({});

  useEffect(() => {
    const fetchCms = async () => {
      const sections = await cmsService.getPageContent('landing');
      const data: Record<string, unknown> = {};
      sections.forEach((s: CmsContentRecord) => {
        data[s.sectionKey] = s.content;
      });
      setCmsData(data);
    };
    fetchCms();
  }, []);

  return (
    <div>
      <HeroSection content={cmsData.hero as HeroContent | undefined} />
      <FeaturesSection content={cmsData.features as FeaturesContent | undefined} />
      <TopProfessionals content={cmsData.topProfessionals as TopProfessionalsContent | undefined} />
      <TestimonialsSection content={cmsData.testimonials as TestimonialsContent | undefined} />
    </div>
  );
}