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

export interface ActivityItemProps {
  title: string;
  description?: string;
  timestamp: string;
  icon?: ReactNode;
  children?: ReactNode;
}

export const ActivityItem = ({ 
  title, 
  description, 
  timestamp, 
  icon,
  children 
}: ActivityItemProps) => {
  return (
    <Surface variant="muted" rounded="lg" padding={4}>
      <Box display="flex" alignItems="start" gap={4}>
        {icon && (
          <Box padding={2} rounded="lg" bg="var(--ui-color-bg-surface-muted)">
            {icon}
          </Box>
        )}
        <Box flex={1}>
          <Box display="flex" alignItems="center" justifyContent="between" marginBottom={1}>
            <Text weight="bold" variant="high">{title}</Text>
            <Text size="xs" variant="low">{timestamp}</Text>
          </Box>
          {description && (
            <Text size="sm" variant="low" marginBottom={children ? 4 : 0}>
              {description}
            </Text>
          )}
          {children}
        </Box>
      </Box>
    </Surface>
  );
};