import type { ComponentProps } from 'react';
import React from 'react';

import { Heading } from '@shoptet/ui-core-web';
import type { SafeOmit } from '@shoptet/utils';

import { useRequireContext } from '../../hooks/useRequireContext';
import type { TypographyOwnProps } from '../Typography/getTypographyProps';
import { getTypographyProps } from '../Typography/getTypographyProps';

const HEADING_LEVELS = { h1: 1, h2: 2, h3: 3, h4: 4, h5: 5 } as const;

/** @inheritdoc */
export interface ReviewCardHeadingProps
  extends SafeOmit<ComponentProps<'h2'>, 'className' | 'style'>, TypographyOwnProps {
  /**
   * HTML element to render.
   */
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
}

export function ReviewCardHeader({ as = 'h2', appearance = 'h2', ...rest }: ReviewCardHeadingProps) {
  useRequireContext('ReviewCard');

  return (
    <div className='reviewCard__header'>
      <Heading level={HEADING_LEVELS[as]} {...getTypographyProps({ appearance, ...rest })} />
    </div>
  );
}
ReviewCardHeader.displayName = 'ReviewCard.Header';