import React from 'react';
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonButtons,
  IonBackButton,
  useIonViewWillEnter,
} from '@ionic/react';
import { setStatusBarStyle, Style } from '../utils/statusBar';

interface PageHeaderProps {
  title: string;
  showBackButton?: boolean;
  defaultBackHref?: string;
  endActions?: React.ReactNode;
  style?: React.CSSProperties;
  toolbarStyle?: React.CSSProperties;
}

export const PageHeader: React.FC<PageHeaderProps> = ({
  title,
  showBackButton = false,
  defaultBackHref = '/home',
  endActions,
  style,
  toolbarStyle,
}) => {
  // Use Ionic lifecycle hook to set status bar style automatically for pages using PageHeader
  useIonViewWillEnter(() => {
    setStatusBarStyle(Style.Dark); // Dark text/icons for light-colored headers
  });

  return (
    <IonHeader className="ion-no-border" style={style}>
      <IonToolbar
        style={
          {
            '--background': '#ffffff',
            '--color': 'var(--ion-color-dark)',
            '--border-width': '0 0 1px 0',
            '--border-color': 'rgba(0, 0, 0, 0.05)',
            ...toolbarStyle,
          } as React.CSSProperties
        }
      >
        {showBackButton && (
          <IonButtons slot="start">
            <IonBackButton defaultHref={defaultBackHref} />
          </IonButtons>
        )}

        <IonTitle
          style={{
            fontWeight: '800',
            fontSize: '1.1rem',
            letterSpacing: '-0.3px',
          }}
        >
          {title}
        </IonTitle>

        {endActions && <IonButtons slot="end">{endActions}</IonButtons>}
      </IonToolbar>
    </IonHeader>
  );
};

export default PageHeader;