import React from 'react';
import './ResultVariants.css';

const ICON = { success: '✓', error: '✕', warning: '!', info: 'i' };

export default function ResultVariants({ type = 'success', title, desc, actionText, secondaryText, onAction, onSecondary, extra }) {
  return (
    <div className={`aa-result is-${type}`}>
      <div className="aa-result-icon">{ICON[type] || 'i'}</div>
      <div className="aa-result-title">{title}</div>
      {desc ? <div className="aa-result-desc">{desc}</div> : null}
      {(actionText || secondaryText) ? (
        <div className="aa-result-actions">
          {actionText ? <button className="aa-result-btn primary" onClick={onAction}>{actionText}</button> : null}
          {secondaryText ? <button className="aa-result-btn" onClick={onSecondary}>{secondaryText}</button> : null}
        </div>
      ) : null}
      {extra ? <div className="aa-result-extra">{extra}</div> : null}
    </div>
  );
}