import { Box } from './Box';
import { Link } from './Link';
import { Text } from './Text';

interface ActivityItemProps {
  headline: string;
  body?: string;
  formattedTime: string;
  ctaHref?: string;
  ctaLabel?: string;
  typeColor?: string;
}

export function ActivityItem({
  headline,
  body,
  formattedTime,
  ctaHref,
  ctaLabel,
  typeColor,
}: ActivityItemProps) {
  return (
    <Surface
      variant="muted"
      padding={3}
      rounded="lg"
      style={{ display: 'flex', alignItems: 'start', gap: '0.75rem' }}
    >
      {typeColor && (
        <Box
          style={{
            width: '0.5rem',
            height: '0.5rem',
            borderRadius: '9999px',
            marginTop: '0.5rem',
            backgroundColor: typeColor,
            flexShrink: 0,
          }}
        />
      )}
      <Box style={{ flex: 1, minWidth: 0 }}>
        <Text color="text-white" weight="medium" block>
          {headline}
        </Text>
        {body && (
          <Text size="sm" color="text-gray-400" block mt={1}>
            {body}
          </Text>
        )}
        <Text size="xs" color="text-gray-500" block mt={1}>
          {formattedTime}
        </Text>
      </Box>
      {ctaHref && ctaLabel && (
        <Box>
          <Link href={ctaHref} variant="primary">
            <Text size="xs">{ctaLabel}</Text>
          </Link>
        </Box>
      )}
    </Surface>
  );
}