import { clsx } from 'clsx';
import * as React from 'react';

import { Layout } from '../propsValues/layouts';

export interface FlowHeaderProps {
  bottomContent?: React.ReactNode;
  className?: string;
  layout?: Layout.VERTICAL | Layout.HORIZONTAL;
  leftContent?: React.ReactNode;
  rightContent?: React.ReactNode;
}

const FlowHeader = React.forwardRef(
  (
    {
      bottomContent,
      className,
      layout = Layout.HORIZONTAL,
      leftContent,
      rightContent,
    }: FlowHeaderProps,
    reference: React.ForwardedRef<HTMLDivElement | null>,
  ) => {
    const isVertical = layout === Layout.VERTICAL;

    return (
      <div
        ref={reference}
        className={clsx(
          'np-flow-header',
          'd-flex',
          'flex-wrap',
          'align-items-center',
          'justify-content-between',
          'flex__item--12',
          className,
        )}
      >
        {leftContent}
        {rightContent}
        <div
          className={clsx('align-items-center', 'd-flex', 'justify-content-center', {
            'flex__item--12': isVertical,
            'order-1 flex-grow-1': !isVertical,
          })}
        >
          {bottomContent}
        </div>
      </div>
    );
  },
);

export default FlowHeader;