import type { JSX } from 'preact';
import { cn } from './cn';

export type ActionRowProps = JSX.HTMLAttributes<HTMLDivElement> & {
  align?: 'start' | 'center' | 'end' | 'between';
  wrap?: boolean;
  compact?: boolean;
};

const ALIGN: Record<NonNullable<ActionRowProps['align']>, string> = {
  start: 'ask-justify-start',
  center: 'ask-justify-center',
  end: 'ask-justify-end',
  between: 'ask-justify-between',
};

export function ActionRow({ className, align = 'end', wrap = true, compact = false, ...props }: ActionRowProps) {
  return (
    <div
      className={cn(
        'ask-action-row ask-flex ask-items-center',
        wrap ? 'ask-flex-wrap' : 'ask-flex-nowrap',
        compact ? 'ask-gap-1.5' : 'ask-gap-2',
        ALIGN[align],
        className,
      )}
      {...props}
    />
  );
}
