admin/components/consumer/ConsumerActionButtons.tsx

'use client'

/**
 * ConsumerActionButtons — standard dual CTA row (primary + cancel) for consumer UI.
 */

import type { ReactNode } from 'react'

import ConsumerButton from '@/components/consumer/ConsumerButton'
import AngleLeftIcon from '@/components/icons/AngleLeftIcon'
import CloseLinearIcon from '@/components/icons/CloseLinearIcon'
import { cn } from '@/lib/cn'
import { texts } from '@/texts'

import { type ConsumerButtonAlign } from './consumerButtonTypes'

export interface ConsumerActionButtonsProps {
  cancelDisabled?: boolean
  cancelIcon?: ReactNode
  cancelLabel?: string
  cancelType?: 'button' | 'reset'
  className?: string
  isCancelLoading?: boolean
  isPrimaryLoading?: boolean
  onCancel?: () => void
  onPrimary?: () => void
  primaryDisabled?: boolean
  primaryDanger?: boolean
  primaryIcon?: ReactNode
  primaryLabel?: string
  primaryType?: 'button' | 'submit'
  align?: ConsumerButtonAlign
}

export default function ConsumerActionButtons({
  cancelDisabled = false,
  cancelIcon = <CloseLinearIcon className="size-3" />,
  cancelLabel = texts.common.cancel,
  cancelType = 'button',
  className,
  isCancelLoading = false,
  isPrimaryLoading = false,
  onCancel,
  onPrimary,
  primaryDisabled = false,
  primaryDanger = false,
  primaryIcon = <AngleLeftIcon className="size-4 rotate-180" />,
  primaryLabel = texts.events.nextStep,
  primaryType = 'submit',
  align = 'start',
}: ConsumerActionButtonsProps) {
  return (
    <div className={cn('flex w-full items-start gap-2', className)}>
      <ConsumerButton
        align={align}
        aria-label={primaryLabel}
        className={cn('min-w-0 flex-1', primaryDanger && 'bg-fourth-900 hover:bg-fourth-700 active:bg-fourth-700')}
        disabled={primaryDisabled}
        fill={primaryDanger ? 'none' : 'navy'}
        fontSize={16}
        iconStart={primaryIcon}
        isLoading={isPrimaryLoading}
        size="lg"
        textColor={primaryDanger ? 'white' : undefined}
        type={primaryType}
        onClick={onPrimary}
      >
        {primaryLabel}
      </ConsumerButton>

      <ConsumerButton
        aria-label={cancelLabel}
        className="shrink-0"
        disabled={cancelDisabled}
        fill="none"
        fontSize={16}
        iconEnd={cancelIcon}
        isLoading={isCancelLoading}
        size="lg"
        textColor="text-tertiary"
        type={cancelType}
        onClick={onCancel}
      >
        {cancelLabel}
      </ConsumerButton>
    </div>
  )
}