# ModalHeader

## Description

A specialized header component designed for modal dialogs that provides structured title display and optional icon button functionality. Offers consistent styling and layout for modal titles with support for action buttons like close controls, creating a cohesive modal experience.

## Aliases

- ModalHeader
- DialogHeader
- ModalTitle
- DialogTitle
- ModalTop

## Props Breakdown

**Extends:** Standalone interface (no HTML element inheritance)

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `title` | `string` | - | No | The title text displayed in the header |
| `iconButton` | `ReactNode` | - | No | Optional icon button element (typically close button) |
| `className` | `string` | - | No | Additional CSS class names |
| `children` | `ReactNode` | - | No | Custom content overriding title prop |

## Examples

### Basic Modal Header
```tsx
import { Modal, ModalHeader, ModalFooter, Button, Text } from '@delightui/components';

function BasicHeaderExample() {
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      <Button onClick={() => setShowModal(true)}>
        Open Modal
      </Button>
      
      <Modal show={showModal} onHide={() => setShowModal(false)}>
        <ModalHeader title="Welcome to Our App" />
        
        <div className="modal-content">
          <Text>This is a basic modal with a simple header title.</Text>
        </div>
        
        <ModalFooter
          type="1Button"
          primaryButton={
            <Button onClick={() => setShowModal(false)}>
              Close
            </Button>
          }
        />
      </Modal>
    </>
  );
}
```

### Header with Close Button
```tsx
function HeaderWithCloseExample() {
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      <Button onClick={() => setShowModal(true)}>
        Open Modal with Close
      </Button>
      
      <Modal show={showModal} onHide={() => setShowModal(false)}>
        <ModalHeader 
          title="Settings"
          iconButton={
            <IconButton 
              onClick={() => setShowModal(false)}
              aria-label="Close modal"
            >
              <Icon icon="Close" />
            </IconButton>
          }
        />
        
        <div className="modal-content">
          <Text>Modal content with a close button in the header.</Text>
          
          <FormField label="Username">
            <Input placeholder="Enter username" />
          </FormField>
          
          <FormField label="Email">
            <Input type="email" placeholder="Enter email" />
          </FormField>
        </div>
        
        <ModalFooter
          type="2Buttons"
          secondaryButton={
            <Button type="Outlined" onClick={() => setShowModal(false)}>
              Cancel
            </Button>
          }
          primaryButton={
            <Button>Save Changes</Button>
          }
        />
      </Modal>
    </>
  );
}
```

### Custom Header Content
```tsx
function CustomHeaderExample() {
  const [showModal, setShowModal] = useState(false);
  const [step, setStep] = useState(1);

  return (
    <>
      <Button onClick={() => setShowModal(true)}>
        Open Multi-Step Modal
      </Button>
      
      <Modal show={showModal} onHide={() => setShowModal(false)}>
        <ModalHeader>
          <div className="custom-header">
            <div className="header-main">
              <Text type="Heading4">Setup Wizard</Text>
              <Text type="BodySmall">Step {step} of 3</Text>
            </div>
            
            <div className="header-actions">
              <IconButton 
                size="Small"
                onClick={() => setShowModal(false)}
                aria-label="Close wizard"
              >
                <Icon icon="Close" />
              </IconButton>
            </div>
          </div>
        </ModalHeader>
        
        <div className="modal-content">
          <div className="progress-indicator">
            {[1, 2, 3].map(stepNumber => (
              <div 
                key={stepNumber}
                className={`progress-step ${stepNumber <= step ? 'active' : ''}`}
              >
                {stepNumber}
              </div>
            ))}
          </div>
          
          <Text>Content for step {step}</Text>
        </div>
        
        <ModalFooter
          type="2Buttons"
          secondaryButton={
            <Button 
              type="Outlined" 
              onClick={() => step > 1 ? setStep(step - 1) : setShowModal(false)}
            >
              {step > 1 ? 'Previous' : 'Cancel'}
            </Button>
          }
          primaryButton={
            <Button onClick={() => step < 3 ? setStep(step + 1) : setShowModal(false)}>
              {step < 3 ? 'Next' : 'Finish'}
            </Button>
          }
        />
      </Modal>
    </>
  );
}
```

### Header with Status Indicator
```tsx
function StatusHeaderExample() {
  const [showModal, setShowModal] = useState(false);
  const [status, setStatus] = useState('pending');

  const getStatusConfig = (status) => {
    switch (status) {
      case 'success':
        return { color: 'green', icon: 'CheckCircle', text: 'Success' };
      case 'error':
        return { color: 'red', icon: 'Error', text: 'Error' };
      case 'warning':
        return { color: 'orange', icon: 'Warning', text: 'Warning' };
      default:
        return { color: 'blue', icon: 'Info', text: 'Processing' };
    }
  };

  const statusConfig = getStatusConfig(status);

  return (
    <>
      <div className="status-controls">
        <Button onClick={() => setShowModal(true)}>
          Open Status Modal
        </Button>
        
        <ButtonGroup>
          <Button 
            size="Small"
            type={status === 'pending' ? 'Primary' : 'Outlined'}
            onClick={() => setStatus('pending')}
          >
            Pending
          </Button>
          <Button 
            size="Small"
            type={status === 'success' ? 'Primary' : 'Outlined'}
            onClick={() => setStatus('success')}
          >
            Success
          </Button>
          <Button 
            size="Small"
            type={status === 'error' ? 'Primary' : 'Outlined'}
            onClick={() => setStatus('error')}
          >
            Error
          </Button>
          <Button 
            size="Small"
            type={status === 'warning' ? 'Primary' : 'Outlined'}
            onClick={() => setStatus('warning')}
          >
            Warning
          </Button>
        </ButtonGroup>
      </div>
      
      <Modal show={showModal} onHide={() => setShowModal(false)}>
        <ModalHeader>
          <div className="status-header">
            <div className="status-info">
              <Icon 
                icon={statusConfig.icon} 
                className={`status-icon ${statusConfig.color}`}
              />
              <div>
                <Text type="Heading5">Operation Status</Text>
                <Text type="BodySmall" className={`status-text ${statusConfig.color}`}>
                  {statusConfig.text}
                </Text>
              </div>
            </div>
            
            <IconButton onClick={() => setShowModal(false)}>
              <Icon icon="Close" />
            </IconButton>
          </div>
        </ModalHeader>
        
        <div className="modal-content">
          <Text>Current operation status: {statusConfig.text}</Text>
          <Text type="BodySmall">
            This modal demonstrates different header states based on operation status.
          </Text>
        </div>
        
        <ModalFooter
          type="1Button"
          primaryButton={
            <Button onClick={() => setShowModal(false)}>
              Close
            </Button>
          }
        />
      </Modal>
    </>
  );
}
```

### Header with Navigation
```tsx
function NavigationHeaderExample() {
  const [showModal, setShowModal] = useState(false);
  const [currentView, setCurrentView] = useState('profile');

  const views = {
    profile: { title: 'Profile Settings', icon: 'Person' },
    security: { title: 'Security & Privacy', icon: 'Security' },
    notifications: { title: 'Notifications', icon: 'Notifications' },
    billing: { title: 'Billing & Plans', icon: 'CreditCard' }
  };

  return (
    <>
      <Button onClick={() => setShowModal(true)}>
        Open Settings
      </Button>
      
      <Modal show={showModal} onHide={() => setShowModal(false)} size="Large">
        <ModalHeader>
          <div className="navigation-header">
            <div className="header-nav">
              <Icon icon={views[currentView].icon} />
              <Text type="Heading4">{views[currentView].title}</Text>
            </div>
            
            <div className="header-actions">
              <ButtonGroup size="Small">
                {Object.entries(views).map(([key, view]) => (
                  <Button
                    key={key}
                    type={currentView === key ? 'Primary' : 'Ghost'}
                    size="Small"
                    onClick={() => setCurrentView(key)}
                  >
                    <Icon icon={view.icon} />
                  </Button>
                ))}
              </ButtonGroup>
              
              <IconButton onClick={() => setShowModal(false)}>
                <Icon icon="Close" />
              </IconButton>
            </div>
          </div>
        </ModalHeader>
        
        <div className="modal-content">
          <Text>Content for {views[currentView].title}</Text>
          
          {currentView === 'profile' && (
            <div>
              <FormField label="Display Name">
                <Input placeholder="Your display name" />
              </FormField>
              <FormField label="Bio">
                <TextArea placeholder="Tell us about yourself" />
              </FormField>
            </div>
          )}
          
          {currentView === 'security' && (
            <div>
              <FormField label="Current Password">
                <Password placeholder="Enter current password" />
              </FormField>
              <FormField label="New Password">
                <Password placeholder="Enter new password" />
              </FormField>
            </div>
          )}
          
          {currentView === 'notifications' && (
            <div>
              <FormField label="Email Notifications">
                <Toggle />
              </FormField>
              <FormField label="Push Notifications">
                <Toggle />
              </FormField>
            </div>
          )}
          
          {currentView === 'billing' && (
            <div>
              <Text>Billing information and subscription details</Text>
            </div>
          )}
        </div>
        
        <ModalFooter
          type="2Buttons"
          secondaryButton={
            <Button type="Outlined" onClick={() => setShowModal(false)}>
              Cancel
            </Button>
          }
          primaryButton={
            <Button>Save Changes</Button>
          }
        />
      </Modal>
    </>
  );
}
```

### Header with Search
```tsx
function SearchHeaderExample() {
  const [showModal, setShowModal] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');
  const [searchMode, setSearchMode] = useState(false);

  const items = [
    'Apple iPhone 14',
    'Samsung Galaxy S23',
    'Google Pixel 7',
    'iPad Pro',
    'MacBook Air',
    'Dell XPS 13'
  ];

  const filteredItems = items.filter(item =>
    item.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <>
      <Button onClick={() => setShowModal(true)}>
        Open Product List
      </Button>
      
      <Modal show={showModal} onHide={() => setShowModal(false)}>
        <ModalHeader>
          <div className="search-header">
            {!searchMode ? (
              <>
                <Text type="Heading4">Product Catalog</Text>
                <div className="header-actions">
                  <IconButton 
                    onClick={() => setSearchMode(true)}
                    aria-label="Search products"
                  >
                    <Icon icon="Search" />
                  </IconButton>
                  <IconButton onClick={() => setShowModal(false)}>
                    <Icon icon="Close" />
                  </IconButton>
                </div>
              </>
            ) : (
              <>
                <div className="search-input-container">
                  <Input
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    placeholder="Search products..."
                    autoFocus
                    leadingIcon={<Icon icon="Search" />}
                  />
                </div>
                <IconButton 
                  onClick={() => {
                    setSearchMode(false);
                    setSearchQuery('');
                  }}
                  aria-label="Close search"
                >
                  <Icon icon="Close" />
                </IconButton>
              </>
            )}
          </div>
        </ModalHeader>
        
        <div className="modal-content">
          {searchMode && searchQuery && (
            <Text type="BodySmall">
              Found {filteredItems.length} result{filteredItems.length !== 1 ? 's' : ''} for "{searchQuery}"
            </Text>
          )}
          
          <List>
            {(searchMode ? filteredItems : items).map((item, index) => (
              <ListItem key={index}>
                <Text>{item}</Text>
              </ListItem>
            ))}
          </List>
          
          {searchMode && filteredItems.length === 0 && (
            <div className="no-results">
              <Text>No products found matching "{searchQuery}"</Text>
            </div>
          )}
        </div>
        
        <ModalFooter
          type="1Button"
          primaryButton={
            <Button onClick={() => setShowModal(false)}>
              Close
            </Button>
          }
        />
      </Modal>
    </>
  );
}
```

### Header with Breadcrumbs
```tsx
function BreadcrumbHeaderExample() {
  const [showModal, setShowModal] = useState(false);
  const [currentPath, setCurrentPath] = useState(['Home', 'Settings', 'Profile']);

  const navigateToPath = (index) => {
    setCurrentPath(prev => prev.slice(0, index + 1));
  };

  return (
    <>
      <Button onClick={() => setShowModal(true)}>
        Open Navigation Modal
      </Button>
      
      <Modal show={showModal} onHide={() => setShowModal(false)}>
        <ModalHeader>
          <div className="breadcrumb-header">
            <div className="breadcrumb-nav">
              <Breadcrumbs>
                {currentPath.map((crumb, index) => (
                  <Breadcrumb 
                    key={index}
                    onClick={() => navigateToPath(index)}
                    isActive={index === currentPath.length - 1}
                  >
                    {crumb}
                  </Breadcrumb>
                ))}
              </Breadcrumbs>
            </div>
            
            <IconButton onClick={() => setShowModal(false)}>
              <Icon icon="Close" />
            </IconButton>
          </div>
        </ModalHeader>
        
        <div className="modal-content">
          <Text type="Heading5">Current Location: {currentPath.join(' > ')}</Text>
          
          <div className="navigation-options">
            <Button 
              type="Outlined"
              onClick={() => setCurrentPath([...currentPath, 'Security'])}
              disabled={currentPath.includes('Security')}
            >
              Go to Security Settings
            </Button>
            
            <Button 
              type="Outlined"
              onClick={() => setCurrentPath([...currentPath, 'Notifications'])}
              disabled={currentPath.includes('Notifications')}
            >
              Go to Notifications
            </Button>
            
            <Button 
              type="Outlined"
              onClick={() => setCurrentPath(['Home'])}
              disabled={currentPath.length === 1}
            >
              Back to Home
            </Button>
          </div>
        </div>
        
        <ModalFooter
          type="1Button"
          primaryButton={
            <Button onClick={() => setShowModal(false)}>
              Close
            </Button>
          }
        />
      </Modal>
    </>
  );
}
```

### Header with Actions Menu
```tsx
function ActionsHeaderExample() {
  const [showModal, setShowModal] = useState(false);
  const [showActionsMenu, setShowActionsMenu] = useState(false);

  const actions = [
    { id: 'edit', label: 'Edit', icon: 'Edit' },
    { id: 'duplicate', label: 'Duplicate', icon: 'Copy' },
    { id: 'share', label: 'Share', icon: 'Share' },
    { id: 'export', label: 'Export', icon: 'Download' },
    { id: 'delete', label: 'Delete', icon: 'Delete', style: 'destructive' }
  ];

  const handleAction = (actionId) => {
    console.log('Action:', actionId);
    setShowActionsMenu(false);
  };

  return (
    <>
      <Button onClick={() => setShowModal(true)}>
        Open Document
      </Button>
      
      <Modal show={showModal} onHide={() => setShowModal(false)}>
        <ModalHeader>
          <div className="actions-header">
            <div className="document-info">
              <Icon icon="Document" />
              <div>
                <Text type="Heading5">Annual Report 2024</Text>
                <Text type="BodySmall">Last modified: 2 hours ago</Text>
              </div>
            </div>
            
            <div className="header-actions">
              <Popover
                show={showActionsMenu}
                onHide={() => setShowActionsMenu(false)}
                trigger={
                  <IconButton 
                    onClick={() => setShowActionsMenu(!showActionsMenu)}
                    aria-label="More actions"
                  >
                    <Icon icon="MoreVert" />
                  </IconButton>
                }
              >
                <List>
                  {actions.map(action => (
                    <ListItem 
                      key={action.id}
                      onClick={() => handleAction(action.id)}
                      className={action.style === 'destructive' ? 'destructive' : ''}
                    >
                      <Icon icon={action.icon} />
                      <Text>{action.label}</Text>
                    </ListItem>
                  ))}
                </List>
              </Popover>
              
              <IconButton onClick={() => setShowModal(false)}>
                <Icon icon="Close" />
              </IconButton>
            </div>
          </div>
        </ModalHeader>
        
        <div className="modal-content">
          <Text>Document content would be displayed here.</Text>
          <Text type="BodySmall">
            Use the actions menu in the header to perform operations on this document.
          </Text>
        </div>
        
        <ModalFooter
          type="1Button"
          primaryButton={
            <Button onClick={() => setShowModal(false)}>
              Close
            </Button>
          }
        />
      </Modal>
    </>
  );
}
```

### Minimizable Header
```tsx
function MinimizableHeaderExample() {
  const [showModal, setShowModal] = useState(false);
  const [isMinimized, setIsMinimized] = useState(false);

  return (
    <>
      <Button onClick={() => setShowModal(true)}>
        Open Minimizable Modal
      </Button>
      
      <Modal 
        show={showModal} 
        onHide={() => setShowModal(false)}
        className={isMinimized ? 'minimized-modal' : ''}
      >
        <ModalHeader>
          <div className="minimizable-header">
            <div className="header-title">
              <Icon icon="Chat" />
              <Text type="Heading5">Chat Support</Text>
              {isMinimized && (
                <Chip size="Small" className="notification-chip">
                  3 new messages
                </Chip>
              )}
            </div>
            
            <div className="window-controls">
              <IconButton 
                size="Small"
                onClick={() => setIsMinimized(!isMinimized)}
                aria-label={isMinimized ? 'Restore window' : 'Minimize window'}
              >
                <Icon icon={isMinimized ? 'Maximize' : 'Minimize'} />
              </IconButton>
              
              <IconButton 
                size="Small"
                onClick={() => setShowModal(false)}
                aria-label="Close window"
              >
                <Icon icon="Close" />
              </IconButton>
            </div>
          </div>
        </ModalHeader>
        
        {!isMinimized && (
          <>
            <div className="modal-content">
              <div className="chat-messages">
                <div className="message support">
                  <Text type="BodySmall">Support Agent</Text>
                  <Text>Hello! How can I help you today?</Text>
                </div>
                
                <div className="message user">
                  <Text type="BodySmall">You</Text>
                  <Text>I need help with my account settings.</Text>
                </div>
                
                <div className="message support">
                  <Text type="BodySmall">Support Agent</Text>
                  <Text>I'd be happy to help you with that. What specific setting would you like to change?</Text>
                </div>
              </div>
              
              <div className="chat-input">
                <Input placeholder="Type your message..." />
                <IconButton>
                  <Icon icon="Send" />
                </IconButton>
              </div>
            </div>
          </>
        )}
      </Modal>
    </>
  );
}
```