import React from 'react';
import { useLiveActivity } from '@/hooks/features/useLiveActivity.ts';
import { useTranslation } from '@/hooks/useI18n.tsx';
import { Organization } from '@/types.ts';
import SectionHeader from '@/components/layout/SectionHeader.tsx';
import { Container, Stack } from '@/components/ui/layout';
import ActivityItem from '@/components/landing/ActivityItem.tsx';
import ActivityItemSkeleton from '@/components/landing/ActivityItemSkeleton.tsx';

interface LiveActivityProps {
  onViewOrganization: (org: Organization) => void;
  organizations: Organization[];
}

const LiveActivity = ({ onViewOrganization, organizations }: LiveActivityProps) => {
  const { t } = useTranslation();
  const { activitiesWithOrgs, isLoading } = useLiveActivity(organizations);

  // Hide section completely if no activities and not loading
  if (!isLoading && activitiesWithOrgs.length === 0) {
    return null;
  }

  return (
    <section className="bg-muted/50 scroll-snap-align-start" aria-labelledby="live-activity-title">
      <Container size="md" className="py-16 sm:py-24 w-full">
        <SectionHeader
          id="live-activity-title"
          title={t('liveActivity.title')}
          className="mb-10 sm:mb-12"
        />
        <div className="flow-root">
          {isLoading ? (
            <Stack spacing="none" className="-my-4">
              {Array.from({ length: 3 }).map((_, index) => (
                <ActivityItemSkeleton key={index} isLastItem={index === 2} />
              ))}
            </Stack>
          ) : (
            <Stack spacing="none" className="-my-4">
              {activitiesWithOrgs.map((activity, index) => (
                <ActivityItem
                  key={`${activity.org.id}-${index}`}
                  activity={activity}
                  onViewOrganization={onViewOrganization}
                  isLastItem={index === activitiesWithOrgs.length - 1}
                />
              ))}
            </Stack>
          )}
        </div>
      </Container>
    </section>
  );
};

export default React.memo(LiveActivity);