import React, { ReactNode } from 'react';
import { Box } from './primitives/Box';
import { Text } from './Text';
import { Image } from './Image';

interface FeedItemProps {
  actorName?: string;
  actorAvatarUrl?: string;
  typeLabel: string;
  headline: string;
  body?: string;
  timeAgo: string;
  cta?: ReactNode;
}

export function FeedItem({
  actorName,
  actorAvatarUrl,
  typeLabel,
  headline,
  body,
  timeAgo,
  cta,
}: FeedItemProps) {
  return (
    <Box display="flex" gap={4}>
      <Box flexShrink={0}>
        {actorAvatarUrl ? (
          <Box width="10" height="10" rounded="full" overflow="hidden" bg="bg-charcoal-outline">
            <Image
              src={actorAvatarUrl}
              alt={actorName || ''}
              width={40}
              height={40}
              fullWidth
              fullHeight
              objectFit="cover"
            />
          </Box>
        ) : (
          <Box 
            width="10" 
            height="10" 
            display="flex" 
            center 
            rounded="full" 
            bg="bg-primary-blue/10" 
            border={true} 
            borderColor="border-primary-blue/40"
          >
            <Text size="xs" color="text-primary-blue" weight="semibold">
              {typeLabel}
            </Text>
          </Box>
        )}
      </Box>
      <Box flexGrow={1} minWidth="0">
        <Box display="flex" alignItems="start" justifyContent="between" gap={2}>
          <Box>
            <Text size="sm" color="text-white" block>{headline}</Text>
            {body && (
              <Text size="xs" color="text-gray-400" block mt={1}>{body}</Text>
            )}
          </Box>
          <Text size="xs" color="text-gray-500" className="whitespace-nowrap" style={{ fontSize: '11px' }}>
            {timeAgo}
          </Text>
        </Box>
        {cta && (
          <Box mt={3}>
            {cta}
          </Box>
        )}
      </Box>
    </Box>
  );
}