import { ReactNode } from 'react';

import { useTestIdAttribute } from '../../../../hooks/useTestIdAttribute';
import { CommonProps } from '../../../../types';
import { assertEmptyObject } from '../../../../utils/assertEmptyObject';

import { StyledFooter } from './styled';

export interface PageFooterProps extends CommonProps {
  /** List of {@link Button} that should be shown in footer */
  children: ReactNode;
}

/**
 * Component that should be used as footer in {@link Page}.
 *
 * ```tsx
 * import {PageFooter, Button, ButtonAppearance } from 'ui-kit';
 *
 * <PageFooter>
 *   <Button appearance={ButtonAppearance.Subtle}>Tertiary</Button>
 *   <Button>Secondary</Button>
 *   <Button appearance={ButtonAppearance.Primary}>Primary</Button>
 * </PageFooter>
 * ```
 */
export function PageFooter(props: PageFooterProps) {
  const { children, className, testId, ariaDescribedBy, ...rest } = props;
  assertEmptyObject(rest);

  const testIdAttribute = useTestIdAttribute();

  return (
    <StyledFooter aria-describedby={ariaDescribedBy} className={className} {...{ [testIdAttribute]: testId }}>
      {children}
    </StyledFooter>
  );
}