import React from 'react';
import type { QuickAction } from '../../types';
import styles from './index.module.less';

interface QuickActionBarProps {
  actions: QuickAction[];
  activeId?: string;
  onActionClick?: (action: QuickAction) => void;
  className?: string;
}

export const QuickActionBar: React.FC<QuickActionBarProps> = ({
  actions,
  activeId,
  onActionClick,
  className,
}) => {
  return (
    <div className={`${styles.bar} ${className ?? ''}`}>
      {actions.map(action => {
        const isActive = action.id === activeId;
        return (
          <button
            key={action.id}
            type="button"
            className={`${styles.pill} ${isActive ? styles.pillActive : ''}`}
            onClick={() => onActionClick?.(action)}
          >
            {action.icon != null && (
              <span className={styles.pillIcon}>
                {typeof action.icon === 'string' ? (
                  <img className={styles.pillIconImg} src={action.icon} alt="" />
                ) : (
                  action.icon
                )}
              </span>
            )}
            <span className={styles.pillLabel}>{action.title}</span>
          </button>
        );
      })}
    </div>
  );
};