import { AriaAttributes, ReactNode } from 'react';

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

import { StyledEmptyState } from './styled';

/** Props for {@link EmptyState} */
export interface EmptyStateProps extends CommonProps {
  children: ReactNode;
  ariaHidden?: AriaAttributes['aria-hidden'];
}

/**
 * Common component for empty content.
 *
 * ```tsx
 * <EmptyState>
 *   <EmptyStateHeader>There are no items</EmptyStateHeader>
 *   <EmptyStateBody>Click "Add item" button to add one</EmptyStateBody>
 *   <EmptyStateButton>Add item</EmptyStateButton>
 * </EmptyState>
 * ```
 */
export function EmptyState(props: EmptyStateProps) {
  const { children, className, ariaHidden, testId, ariaDescribedBy, ...rest } = props;
  assertEmptyObject(rest);

  const testIdAttribute = useTestIdAttribute();

  return (
    <StyledEmptyState
      aria-describedby={ariaDescribedBy}
      aria-hidden={ariaHidden}
      className={className}
      role="article"
      {...{ [testIdAttribute]: testId }}
    >
      {children}
    </StyledEmptyState>
  );
}