import { ReactNode } from 'react';

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

import { StyledContent } from './styled';

export interface PageProps extends CommonProps {
  /** Page content */
  children: ReactNode;
}

/**
 * Main application page container.
 *
 * ```tsx
 * import {
 *   Page,
 *   PageBody,
 *   PageHeadline,
 *   PageFooter,
 *   IconGlyph,
 *   Button,
 *   ButtonAppearance,
 * } from 'ui-kit';
 *
 * <Page>
 *   <PageHeadline icon={IconGlyph.PersonAdd}>New Contact</PageHeadline>
 *   <PageBody>Some content</PageBody>
 *   <PageFooter>
 *     <Button appearance={ButtonAppearance.Subtle}>Subtle</Button>
 *     <Button>Default</Button>
 *     <Button appearance={ButtonAppearance.Primary}>Primary</Button>
 *   </PageFooter>
 * </Page>
 * ```
 */
export function Page(props: PageProps) {
  const { children, className, testId, ariaDescribedBy, ...rest } = props;
  assertEmptyObject(rest);

  const testIdAttribute = useTestIdAttribute();

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