/**
 * 操作按钮组组件
 */

import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import type { ComponentPropsMap, RenderContext } from '../types';

interface ActionButtonsProps {
  props: ComponentPropsMap['action_buttons'];
  context: RenderContext;
}

export function ActionButtons({ props, context }: ActionButtonsProps) {
  const { buttons, layout = 'horizontal', align = 'left' } = props;

  const alignClass = {
    left: 'justify-start',
    center: 'justify-center',
    right: 'justify-end',
  };

  return (
    <div
      className={cn(
        'flex gap-2',
        layout === 'vertical' ? 'flex-col' : 'flex-row flex-wrap',
        alignClass[align]
      )}
    >
      {buttons.map(button => (
        <Button
          key={button.id}
          variant={button.variant || 'default'}
          disabled={button.disabled || context.loading}
          onClick={() => context.onAction?.(button.action, button.params)}
        >
          {button.label}
        </Button>
      ))}
    </div>
  );
}
