import { clsx } from 'clsx';
import { PropsWithChildren } from 'react';

import { DisplayTypes, Typography } from '../common';

type Props = PropsWithChildren<{
  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
  id?: string;
  type?: DisplayTypes;
  className?: string;
}>;

function Display({
  as: Heading = 'h1',
  type = Typography.DISPLAY_LARGE,
  children,
  className,
  id,
}: Props) {
  return (
    <Heading id={id} className={clsx('np-display', `np-text-${type}`, 'text-primary', className)}>
      {children}
    </Heading>
  );
}

export default Display;