'use client';

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

interface SectionBlockProps {
  block: Block;
  context?: { channelId: string; messageId: string };
}

export default function SectionBlock({ block }: SectionBlockProps) {
  return (
    <div className="flex gap-3 py-1">
      {block.text && (
        <div className="flex-1">
          <TextRenderer text={block.text} />
        </div>
      )}
      {block.fields && block.fields.length > 0 && (
        <div className="flex-1 grid grid-cols-2 gap-2">
          {block.fields.map((field, i) => (
            <div key={i}>
              <TextRenderer text={field} />
            </div>
          ))}
        </div>
      )}
      {block.accessory && (
        <div className="flex-shrink-0">
          {renderAccessory(block.accessory)}
        </div>
      )}
    </div>
  );
}

function renderAccessory(accessory: any): React.ReactNode {
  if (accessory.type === 'image') {
    return (
      <img
        src={accessory.image_url}
        alt={accessory.alt_text || ''}
        className="max-w-16 max-h-16 rounded object-cover"
      />
    );
  }
  if (accessory.type === 'button') {
    return (
      <button className="rounded border border-gray-600 px-3 py-1 text-xs text-gray-200 hover:bg-gray-700 transition-colors">
        {accessory.text?.text || 'Button'}
      </button>
    );
  }
  return null;
}