import { AriaAttributes, ReactNode } from 'react';

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

import { StyledContent } from './styled';

export interface CardProps extends CommonProps {
  /**
   * Content of card
   *
   * Should be {@link CardHeader} and {@link CardBody}.
   */
  children: ReactNode;
  ariaLabelledBy?: AriaAttributes['aria-labelledby'];
}

/**
 * Card with given header (by {@link CardHeader}) and body (by {@link CardBody}).
 *
 * ```tsx
 * import { Card, CardHeader, CardBody } from 'ui-kit';
 *
 * <Card>
 *   <CardHeader>Contact Information</CardHeader>
 *   <CardBody>Some content</CardBody>
 * </Card>
 * ```
 */
export function Card(props: CardProps) {
  const { children, className, ariaLabelledBy, testId, ariaDescribedBy, ...rest } = props;
  assertEmptyObject(rest);

  const testIdAttribute = useTestIdAttribute();

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