# Header Compound Component

A flexible compound component for creating headers with various configurations.

## Basic Usage

```tsx
import { Header } from 'motorinc-global-components';

// Simple header with title
<Header statusBarValue={44}>
  <Header.Row>
    <Header.Left backIcon onBackPress={() => navigation.goBack()} />
    <Header.Center title="Settings" />
    <Header.Right />
  </Header.Row>
</Header>

// Header with search
<Header statusBarValue={44}>
  <Header.Row>
    <Header.Left />
    <Header.Center title="Messages" />
    <Header.Right icons={[
      { name: 'search', onPress: () => setShowSearch(true) }
    ]} />
  </Header.Row>
  <Header.Search placeholder="Search messages..." onChangeText={handleSearch} />
</Header>

// Header with contact info
<Header statusBarValue={44}>
  <Header.Row>
    <Header.Left
      backIcon
      onBackPress={() => navigation.goBack()}
      isContact
      contactSource={avatarUri}
      contactTitle="John Doe"
      contactSubTitle="Online"
      isOnline
    />
    <Header.Center />
    <Header.Right icons={[
      { name: 'chat', onPress: handleCall },
      { name: 'menu', onPress: handleMenu }
    ]} />
  </Header.Row>
</Header>

// Header with large title
<Header statusBarValue={44}>
  <Header.Row>
    <Header.Left />
    <Header.Center />
    <Header.Right isButton buttonTitle="Edit" onButtonPress={handleEdit} />
  </Header.Row>
  <Header.Title title="My Profile" />
</Header>
```

## Components

### `Header`

Main container component.

**Props:**

- `children`: ReactNode - Child components
- `statusBarValue?`: number - Status bar height (default: 0)
- `style?`: StyleProp<ViewStyle> - Custom styles
- `showPrompt?`: string - Optional prompt text at top

### `Header.Row`

Container for left, center, and right sections.

**Props:**

- `children`: ReactNode - Should contain Header.Left, Header.Center, Header.Right

### `Header.Left`

Left section of the header.

**Props:**

- `children?`: ReactNode - Custom content (overrides other props)
- `backIcon?`: boolean - Show back arrow
- `backIconColor?`: string - Back icon color
- `backIconWidth?`: number - Back icon width (default: 8)
- `backIconHeight?`: number - Back icon height (default: 16)
- `label?`: string - Text label next to back icon
- `labelColor?`: string - Label text color
- `onBackPress?`: () => void - Back button press handler
- `showLeading?`: boolean - Show leading avatar/image
- `leadingSource?`: ImageURISource - Leading image source
- `leadingContainerStyle?`: StyleProp<ViewStyle> - Leading container styles
- `onLeadingPress?`: () => void - Leading press handler
- `isContact?`: boolean - Show as contact header
- `contactSource?`: ImageURISource - Contact avatar
- `contactName?`: string - Contact name fallback
- `contactTitle?`: string - Contact display name
- `contactSubTitle?`: string - Contact status
- `isOnline?`: boolean - Show online indicator

### `Header.Center`

Center section of the header.

**Props:**

- `children?`: ReactNode - Custom content (overrides other props)
- `title?`: string - Header title
- `titleColor?`: string - Title color
- `subtitle?`: string - Subtitle text
- `showSubtitle?`: boolean - Whether to show subtitle

### `Header.Right`

Right section of the header.

**Props:**

- `children?`: ReactNode - Custom content (overrides other props)
- `icons?`: IconItem[] - Array of icons to display
- `isButton?`: boolean - Show as text button
- `buttonTitle?`: string - Button text
- `buttonTextColor?`: string - Button text color
- `buttonStyle?`: StyleProp<ViewStyle> - Button styles
- `onButtonPress?`: () => void - Button press handler

### `Header.Title`

Large title section (typically below the main row).

**Props:**

- `title`: string - Large title text

### `Header.Search`

Search input section.

**Props:**

- `placeholder?`: string - Search placeholder (default: "Search")
- `onChangeText?`: (text: string) => void - Text change handler

## Migration from NavigationHeader

The compound component provides the same functionality as NavigationHeader but with better composition:

```tsx
// Old NavigationHeader
<NavigationHeader
  statusBarvalue={44}
  backIcon
  title="Settings"
  handleBack={() => navigation.goBack()}
  iconsList={[{ name: 'search', onPress: handleSearch }]}
/>

// New Header compound component
<Header statusBarValue={44}>
  <Header.Row>
    <Header.Left backIcon onBackPress={() => navigation.goBack()} />
    <Header.Center title="Settings" />
    <Header.Right icons={[{ name: 'search', onPress: handleSearch }]} />
  </Header.Row>
</Header>
```