import * as React from 'react'
import { cn } from '@/lib/utils'

/**
 * FormActions — фиксированная row кнопок [Cancel | Submit] в footer форм.
 * Reverse на mobile — primary action на bottom (proper UX).
 */
export type FormActionsProps = React.HTMLAttributes<HTMLDivElement> & {
  /** Horizontal alignment. Default 'end' (right-justified). */
  align?: 'start' | 'end' | 'between'
}

const ALIGN_CLASS: Record<NonNullable<FormActionsProps['align']>, string> = {
  start: 'sm:justify-start',
  end: 'sm:justify-end',
  between: 'sm:justify-between',
}

export function FormActions({ className, children, align = 'end', ...props }: FormActionsProps) {
  return (
    <div
      className={cn(
        'flex flex-col-reverse gap-2 sm:flex-row pt-3 border-t border-line-2',
        ALIGN_CLASS[align],
        className,
      )}
      {...props}
    >
      {children}
    </div>
  )
}