import { StatusBadge } from '@/components/foundation/StatusBadge';
import styles from './SiteHeader.module.css';

interface DisabledActionProps {
  label: string;
  reason: string;
  pendingLabel?: string;
  conversion?: boolean;
}

export function DisabledAction({
  label,
  reason,
  pendingLabel,
  conversion = false,
}: DisabledActionProps) {
  return (
    <span
      className={conversion ? styles.conversionDisabled : styles.actionDisabled}
      role="link"
      aria-disabled="true"
      aria-label={`${label}. ${reason}`}
      title={reason}
    >
      <span>{label}</span>
      {pendingLabel ? <StatusBadge>{pendingLabel}</StatusBadge> : null}
    </span>
  );
}
