'use client';

import React from 'react';
import type { Block } from './BlockRenderer';

export default function ContextBlock({ block }: { block: Block }) {
  return (
    <div className="flex flex-wrap items-center gap-1.5 py-0.5">
      {block.elements?.map((element, index) => {
        if (element.type === 'image') {
          return (
            <img
              key={index}
              src={element.image_url}
              alt={element.alt_text || ''}
              className="h-16 w-16 rounded object-cover"
            />
          );
        }
        if (element.type === 'mrkdwn' || element.type === 'plain_text') {
          return (
            <span key={index} className="text-xs text-gray-400">
              {element.text}
            </span>
          );
        }
        return null;
      })}
    </div>
  );
}