import { Group, type GroupProps } from '@mantine/core';
import type { CSSProperties } from 'react';

/**
 * Action row pinned to the bottom of a modal.
 *
 * Modal bodies scroll (see the Modal styles in the theme), which would carry the
 * confirm button off-screen on a tall modal. Sticking to the bottom of the
 * scrollport keeps the decision reachable from any scroll position. Negative
 * margins bleed the background over the body's padding so nothing shows through
 * underneath; on a modal short enough not to scroll this renders identically to
 * a plain Group.
 */
export function ModalFooter({
  children,
  style,
  ...props
}: Omit<GroupProps, 'style'> & { style?: CSSProperties }) {
  return (
    <Group
      justify="flex-end"
      {...props}
      style={{
        position: 'sticky',
        bottom: 'calc(var(--mb-padding, var(--mantine-spacing-md)) * -1)',
        marginInline: 'calc(var(--mb-padding, var(--mantine-spacing-md)) * -1)',
        marginBottom: 'calc(var(--mb-padding, var(--mantine-spacing-md)) * -1)',
        padding: 'var(--mb-padding, var(--mantine-spacing-md))',
        background: 'var(--mantine-color-body)',
        borderTop: '1px solid var(--mantine-color-default-border)',
        zIndex: 1,
        ...style,
      }}
    >
      {children}
    </Group>
  );
}
