import React from 'react';
import { Activity } from 'lucide-react';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { ActivityItem } from '@/ui/ActivityItem';
import { Icon } from '@/ui/Icon';
import { ActivityFeedList } from '@/ui/ActivityFeedList';
import { MinimalEmptyState } from '@/ui/EmptyState';

interface FeedItem {
  id: string;
  headline: string;
  body?: string;
  formattedTime: string;
  ctaHref?: string;
  ctaLabel?: string;
}

interface ActivityFeedProps {
  items: FeedItem[];
  hasItems: boolean;
}

export function ActivityFeed({ items, hasItems }: ActivityFeedProps) {
  return (
    <Card>
      <Heading level={2} icon={<Icon icon={Activity} size={5} color="var(--primary-blue)" />} mb={4}>
        Recent Activity
      </Heading>
      {hasItems ? (
        <ActivityFeedList>
          {items.slice(0, 5).map((item) => (
            <ActivityItem
              key={item.id}
              headline={item.headline}
              body={item.body}
              formattedTime={item.formattedTime}
              ctaHref={item.ctaHref}
              ctaLabel={item.ctaLabel}
            />
          ))}
        </ActivityFeedList>
      ) : (
        <MinimalEmptyState
          icon={Activity}
          title="No activity yet"
          description="Join leagues and add friends to see activity here"
        />
      )}
    </Card>
  );
}