import React from 'react';
import { HeadingContext, useContextProps } from 'react-aria-components';

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

import { getTypographyProps } from '../../../Typography/getTypographyProps';

const capitalizeChildren = (children: React.ReactNode) => {
  if (typeof children === 'string') {
    return children.charAt(0).toUpperCase() + children.slice(1);
  }

  return children;
};

export const CalendarHeading = React.forwardRef<HTMLHeadingElement, React.PropsWithChildren>((props, ref) => {
  [props, ref] = useContextProps(props, ref, HeadingContext);

  return (
    <Heading
      ref={ref}
      {...getTypographyProps({ ...props, appearance: 'sm', className: 'dateField__calendarHeaderTitle' })}
      level={2}
    >
      {capitalizeChildren(props.children)}
    </Heading>
  );
});

CalendarHeading.displayName = 'CalendarHeading';