import type { AlertDto } from '../../api/queries/alerts';
import css from './alerts-page.module.css';

/**
 * Shared DataTable expandedContent renderer for alert rows.
 * Used by Inbox, All alerts, and History pages.
 */
export function renderAlertExpanded(alert: AlertDto) {
  return (
    <div className={css.expanded}>
      {alert.message && (
        <div className={css.expandedField}>
          <span className={css.expandedLabel}>Message</span>
          <p className={css.expandedValue}>{alert.message}</p>
        </div>
      )}
      <div className={css.expandedGrid}>
        <div className={css.expandedField}>
          <span className={css.expandedLabel}>Fired at</span>
          <span className={css.expandedValue}>{alert.firedAt ?? '—'}</span>
        </div>
        {alert.resolvedAt && (
          <div className={css.expandedField}>
            <span className={css.expandedLabel}>Resolved at</span>
            <span className={css.expandedValue}>{alert.resolvedAt}</span>
          </div>
        )}
        {alert.ackedAt && (
          <div className={css.expandedField}>
            <span className={css.expandedLabel}>Acknowledged at</span>
            <span className={css.expandedValue}>{alert.ackedAt}</span>
          </div>
        )}
        <div className={css.expandedField}>
          <span className={css.expandedLabel}>Rule</span>
          <span className={css.expandedValue}>{alert.ruleId ?? '—'}</span>
        </div>
      </div>
    </div>
  );
}
