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

interface SponsorActivityItemProps {
  message: string;
  time: string;
  typeColor: string;
  formattedImpressions?: string | null;
}

export function SponsorActivityItem({
  message,
  time,
  typeColor,
  formattedImpressions,
}: SponsorActivityItemProps) {
  return (
    <Stack direction="row" align="start" gap={3} py={3} borderBottom={true} borderColor="border-charcoal-outline/50">
      <Box width="2" height="2" rounded="full" mt={2} className={typeColor} flexShrink={0} />
      <Box flexGrow={1} minWidth="0">
        <Text size="sm" color="text-white" block truncate>{message}</Text>
        <Stack direction="row" align="center" gap={2} mt={1}>
          <Text size="xs" color="text-gray-500">{time}</Text>
          {formattedImpressions && (
            <>
              <Text size="xs" color="text-gray-600">•</Text>
              <Text size="xs" color="text-gray-400">{formattedImpressions} views</Text>
            </>
          )}
        </Stack>
      </Box>
    </Stack>
  );
}