import React, { type JSX } from 'react';
import HeaderContent from '@digigov/react-core/HeaderContent';
import PhaseBanner from '@digigov/react-core/PhaseBanner';
import PhaseBannerHeaderContainer from '@digigov/react-core/PhaseBannerHeaderContainer';
import PhaseBannerTag from '@digigov/react-core/PhaseBannerTag';
import PhaseBannerText from '@digigov/react-core/PhaseBannerText';

type DivElementAttributes = JSX.IntrinsicElements['div'];
export interface PhaseBannerHeaderProps extends DivElementAttributes {
  tag?: string;
  text?: string;
}

export const PhaseBannerHeader = React.forwardRef<
  HTMLDivElement,
  PhaseBannerHeaderProps
>(function PhaseBannerHeader({ text, tag, ...props }, ref) {
  return (
    <PhaseBannerHeaderContainer {...props} ref={ref}>
      <HeaderContent>
        <PhaseBanner>
          <PhaseBannerTag>{tag}</PhaseBannerTag>
          <PhaseBannerText>{text}</PhaseBannerText>
        </PhaseBanner>
      </HeaderContent>
    </PhaseBannerHeaderContainer>
  );
});

export default PhaseBannerHeader;