Stirling-PDF/frontend/src/saas/components/onboarding/renderButtons.tsx

import React from 'react';
import { Button, Group, ActionIcon } from '@mantine/core';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import { TFunction } from 'i18next';
import { ButtonDefinition, type FlowState, type ButtonAction } from '@app/components/onboarding/saasOnboardingFlowConfig';

interface RenderButtonsProps {
  slideDefinition: {
    buttons: ButtonDefinition[];
    id: string;
  };
  flowState: FlowState;
  onAction: (action: ButtonAction) => void;
  t: TFunction;
}

export function renderButtons({ slideDefinition, flowState, onAction, t }: RenderButtonsProps) {
  const leftButtons = slideDefinition.buttons.filter((btn) => btn.group === 'left');
  const rightButtons = slideDefinition.buttons.filter((btn) => btn.group === 'right');

  const buttonStyles = (variant: ButtonDefinition['variant']) =>
    variant === 'primary'
      ? {
          root: {
            background: 'var(--onboarding-primary-button-bg)',
            color: 'var(--onboarding-primary-button-text)',
          },
        }
      : {
          root: {
            background: 'var(--onboarding-secondary-button-bg)',
            border: '1px solid var(--onboarding-secondary-button-border)',
            color: 'var(--onboarding-secondary-button-text)',
          },
        };

  const resolveButtonLabel = (button: ButtonDefinition) => {
    // Translate the label (it's a translation key)
    const label = button.label ?? '';
    if (!label) return '';

    // Extract fallback text from translation key (e.g., 'onboarding.buttons.next' -> 'Next')
    const fallback = label.split('.').pop() || label;
    return t(label, fallback);
  };

  const renderButton = (button: ButtonDefinition) => {
    const disabled = button.disabledWhen?.(flowState) ?? false;

    if (button.type === 'icon') {
      return (
        <ActionIcon
          key={button.key}
          onClick={() => onAction(button.action)}
          radius="md"
          size={40}
          disabled={disabled}
          styles={{
            root: {
              background: 'var(--onboarding-secondary-button-bg)',
              border: '1px solid var(--onboarding-secondary-button-border)',
              color: 'var(--onboarding-secondary-button-text)',
            },
          }}
        >
          {button.icon === 'chevron-left' && <ChevronLeftIcon fontSize="small" />}
        </ActionIcon>
      );
    }

    const variant = button.variant ?? 'secondary';
    const label = resolveButtonLabel(button);

    return (
      <Button key={button.key} onClick={() => onAction(button.action)} disabled={disabled} styles={buttonStyles(variant)}>
        {label}
      </Button>
    );
  };

  if (leftButtons.length === 0) {
    return <Group justify="flex-end">{rightButtons.map(renderButton)}</Group>;
  }

  if (rightButtons.length === 0) {
    return <Group justify="flex-start">{leftButtons.map(renderButton)}</Group>;
  }

  return (
    <Group justify="space-between">
      <Group gap={12}>{leftButtons.map(renderButton)}</Group>
      <Group gap={12}>{rightButtons.map(renderButton)}</Group>
    </Group>
  );
}