import { Text } from '../../../../components/Text/Text';
import { TextVariant } from '../../../../components/Text/constants';
import { useTestIdAttribute } from '../../../../hooks/useTestIdAttribute';
import { CommonProps } from '../../../../types';
import { assertEmptyObject } from '../../../../utils/assertEmptyObject';

import { StyledHeadline } from './styled';

export interface PageHeadlineProps extends CommonProps {
  /** Text that should be shown */
  children: string;
  id?: string;
}

/**
 * Component that should be used as header in {@link Page}.
 *
 * ```tsx
 * import { PageHeadline } from 'ui-kit';
 *
 * <PageHeadline>New Contact</PageHeadline>
 * ```
 */
export function PageHeadline(props: PageHeadlineProps) {
  const { children, id, className, testId, ariaDescribedBy, ...rest } = props;
  assertEmptyObject(rest);

  const testIdAttribute = useTestIdAttribute();

  return (
    <StyledHeadline
      aria-describedby={ariaDescribedBy}
      className={className}
      {...{ [testIdAttribute]: testId }}
    >
      <Text className={className} variant={TextVariant.SectionHeadline}>
        <span id={id}>{children}</span>
      </Text>
    </StyledHeadline>
  );
}