import { ReactNode } from 'react';
import { Box } from './Box';
import { Surface } from './Surface';

interface ActivityFeedItemProps {
  icon: ReactNode;
  content: ReactNode;
  timestamp: string;
}

export function ActivityFeedItem({
  icon,
  content,
  timestamp,
}: ActivityFeedItemProps) {
  return (
    <Box
      display="flex"
      alignItems="start"
      gap={3}
      py={3}
      borderBottom
      style={{ borderColor: 'rgba(38, 38, 38, 0.3)' }}
      className="last:border-0"
    >
      <Surface
        variant="muted"
        w="8"
        h="8"
        rounded="full"
        display="flex"
        center
        flexShrink={0}
      >
        {icon}
      </Surface>
      <Box style={{ flex: 1, minWidth: 0 }}>
        <Text size="sm" leading="relaxed" block>
          {content}
        </Text>
        <Text size="xs" color="text-gray-500" mt={1} block>
          {timestamp}
        </Text>
      </Box>
    </Box>
  );
}