import React from 'react';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';

interface ActivityItemProps {
  activity: {
    id: string;
    message: string;
    time: string;
    typeColor: string;
    formattedImpressions?: string | null;
  };
}

export function ActivityItem({ activity }: ActivityItemProps) {
  return (
    <Stack direction="row" align="start" gap={3} style={{ padding: '0.75rem 0', borderBottom: '1px solid rgba(38, 38, 38, 0.5)' }}>
      <Box style={{ width: '0.5rem', height: '0.5rem', borderRadius: '9999px', marginTop: '0.5rem', backgroundColor: activity.typeColor }} />
      <Box style={{ flex: 1, minWidth: 0 }}>
        <Text size="sm" color="text-white" style={{ display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{activity.message}</Text>
        <Stack direction="row" align="center" gap={2} style={{ marginTop: '0.25rem' }}>
          <Text size="xs" color="text-gray-500">{activity.time}</Text>
          {activity.formattedImpressions && (
            <>
              <Text size="xs" color="text-gray-600">•</Text>
              <Text size="xs" color="text-gray-400">{activity.formattedImpressions} views</Text>
            </>
          )}
        </Stack>
      </Box>
    </Stack>
  );
}