'use client';

import React from 'react';
import { Activity } from 'lucide-react';
import { Card } from '@/ui/Card';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Link } from '@/ui/Link';

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>
      <Stack gap={4}>
        <Heading level={2} icon={<Activity style={{ width: '1.25rem', height: '1.25rem', color: '#3b82f6' }} />}>
          Recent Activity
        </Heading>
        {hasItems ? (
          <Stack gap={4}>
            {items.slice(0, 5).map((item) => (
              <Box key={item.id} style={{ display: 'flex', alignItems: 'start', gap: '0.75rem', padding: '0.75rem', backgroundColor: '#0f1115', borderRadius: '0.5rem' }}>
                <Box style={{ flex: 1 }}>
                  <Text color="text-white" weight="medium" block>{item.headline}</Text>
                  {item.body && <Text size="sm" color="text-gray-400" block mt={1}>{item.body}</Text>}
                  <Text size="xs" color="text-gray-500" block mt={1}>{item.formattedTime}</Text>
                </Box>
                {item.ctaHref && item.ctaLabel && (
                  <Box>
                    <Link href={item.ctaHref} variant="primary">
                      <Text size="xs">{item.ctaLabel}</Text>
                    </Link>
                  </Box>
                )}
              </Box>
            ))}
          </Stack>
        ) : (
          <Stack align="center" gap={2} py={8}>
            <Activity style={{ width: '2.5rem', height: '2.5rem', color: '#525252' }} />
            <Text color="text-gray-400">No activity yet</Text>
            <Text size="sm" color="text-gray-500">Join leagues and add friends to see activity here</Text>
          </Stack>
        )}
      </Stack>
    </Card>
  );
}