'use client';

import {Grid} from '@astryxdesign/core/Grid';
import {VStack} from '@astryxdesign/core/Layout';
import {ActivitiesPanel} from '@/features/engagement/components/ActivitiesPanel';
import {CampaignsPanel} from '@/features/engagement/components/CampaignsPanel';
import {JourneyPanel} from '@/features/engagement/components/JourneyPanel';

/**
 * Customer activity and engagement, from the platform: activities and their
 * attributed impact, campaigns, and the customer journey. Every panel follows
 * the dashboard's shop and range, and says plainly when it has nothing yet —
 * nothing here is estimated to fill a gap.
 */
export function EngagementSection() {
  return (
    <VStack gap={4}>
      <ActivitiesPanel />
      <Grid columns={{minWidth: 360, max: 2, repeat: 'fit'}} gap={4}>
        <CampaignsPanel />
        <JourneyPanel />
      </Grid>
    </VStack>
  );
}