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

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

import type { PublicTypographyProps, TypographyOwnProps } from '../getTypographyProps';
import { getTypographyProps } from '../getTypographyProps';

export interface H2Props extends SafeOmit<ComponentProps<'h2'>, 'className' | 'style'>, PublicTypographyProps {
  divider?: TypographyOwnProps['divider'];
}

export function H2({ appearance = 'h2', divider = true, ...rest }: H2Props) {
  return <Heading level={2} {...getTypographyProps({ appearance, divider, ...rest })} />;
}