'use client';

import React from 'react';
import { Activity } from 'lucide-react';
import { Card } from '@/ui/Card';
import { SectionHeader } from '@/ui/SectionHeader';
import { ActivityItem } from '@/ui/ActivityItem';
import { Icon } from '@/ui/Icon';
import { EmptyState } from '@/ui/EmptyState';
import { Button } from '@/ui/Button';

import { Stack } from '@/ui/Stack';

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>
      <SectionHeader
        title="Recent Activity"
        variant="minimal"
        actions={<Icon icon={Activity} size={5} intent="primary" />}
      />
      {hasItems ? (
        <Stack gap={4}>
          {items.slice(0, 5).map((item) => (
            <ActivityItem
              key={item.id}
              title={item.headline}
              description={item.body}
              timestamp={item.formattedTime}
            >
              {item.ctaHref && item.ctaLabel && (
                <Button variant="ghost" size="sm" as="a" href={item.ctaHref}>
                  {item.ctaLabel}
                </Button>
              )}
            </ActivityItem>
          ))}
        </Stack>
      ) : (
        <EmptyState
          icon={Activity}
          title="No activity yet"
          description="Join leagues and add friends to see activity here"
          variant="minimal"
        />
      )}
    </Card>
  );
}