'use client';

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

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

export default function ActionsBlock({ block }: ActionsBlockProps) {
  return (
    <div className="flex flex-wrap gap-2 py-1">
      {block.elements?.map((element, index) => {
        if (element.type === 'button') {
          return (
            <button
              key={index}
              className={`rounded px-3 py-1 text-xs font-medium transition-colors ${
                element.style === 'primary'
                  ? 'bg-blue-600 text-white hover:bg-blue-700'
                  : element.style === 'danger'
                  ? 'bg-red-600 text-white hover:bg-red-700'
                  : 'border border-gray-600 text-gray-200 hover:bg-gray-700'
              }`}
            >
              {element.text?.text || 'Button'}
            </button>
          );
        }
        if (element.type === 'select') {
          return (
            <select
              key={index}
              className="rounded border border-gray-600 bg-[#1a1a2e] px-2 py-1 text-xs text-gray-200"
            >
              <option>{element.placeholder?.text || 'Select...'}</option>
              {element.options?.map((opt: any, i: number) => (
                <option key={i} value={opt.value}>
                  {opt.text?.text || opt.value}
                </option>
              ))}
            </select>
          );
        }
        if (element.type === 'overflow') {
          return (
            <button
              key={index}
              className="rounded border border-gray-600 px-2 py-1 text-xs text-gray-200 hover:bg-gray-700"
            >
              ⋯
            </button>
          );
        }
        if (element.type === 'datepicker') {
          return (
            <input
              key={index}
              type="date"
              className="rounded border border-gray-600 bg-[#1a1a2e] px-2 py-1 text-xs text-gray-200"
            />
          );
        }
        return null;
      })}
    </div>
  );
}