import React from 'react';
import { Box } from './primitives/Box';
import { Text } from './Text';
import { Surface } from './primitives/Surface';
import { Link } from './Link';

interface ActivityItemProps {
  title?: string;
  description?: string;
  timeAgo?: string;
  color?: string;
  headline?: string;
  body?: string;
  formattedTime?: string;
  ctaHref?: string;
  ctaLabel?: string;
}

export function ActivityItem({ 
  title, 
  description, 
  timeAgo, 
  color = 'bg-primary-blue',
  headline,
  body,
  formattedTime,
  ctaHref,
  ctaLabel
}: ActivityItemProps) {
  return (
    <Surface
      variant="muted"
      rounded="lg"
      display="flex"
      alignItems="start"
      gap={3}
      p={4}
    >
      <Box
        w="2"
        h="2"
        mt={1.5}
        rounded="full"
        bg={color}
        flexShrink={0}
      />
      <Box flex={1} minWidth={0}>
        <Text color="text-white" weight="medium" block>
          {title || headline}
        </Text>
        <Text size="sm" color="text-gray-400" block mt={0.5}>
          {description || body}
        </Text>
        <Text size="xs" color="text-gray-500" block mt={2}>
          {timeAgo || formattedTime}
        </Text>
        {ctaHref && ctaLabel && (
          <Box mt={3}>
            <Link href={ctaHref} size="xs" variant="primary">
              {ctaLabel}
            </Link>
          </Box>
        )}
      </Box>
    </Surface>
  );
}