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

export interface FeedItemProps {
  user: {
    name: string;
    avatar?: string;
  };
  content: ReactNode;
  timestamp: string;
  actions?: ReactNode;
}

export const FeedItem = ({ 
  user, 
  content, 
  timestamp, 
  actions 
}: FeedItemProps) => {
  return (
    <Surface variant="default" rounded="lg" padding={4} style={{ border: '1px solid var(--ui-color-border-default)' }}>
      <Box display="flex" alignItems="start" gap={4}>
        <Avatar src={user.avatar} alt={user.name} size="md" />
        <Box flex={1}>
          <Box display="flex" alignItems="center" justifyContent="between" marginBottom={2}>
            <Text weight="bold" variant="high">{user.name}</Text>
            <Text size="xs" variant="low">{timestamp}</Text>
          </Box>
          <Box marginBottom={4}>
            {typeof content === 'string' ? (
              <Text variant="med">{content}</Text>
            ) : content}
          </Box>
          {actions && (
            <Box display="flex" alignItems="center" gap={4} borderTop paddingTop={4}>
              {actions}
            </Box>
          )}
        </Box>
      </Box>
    </Surface>
  );
};