# ModalFooter

## Description

A specialized footer component designed for modal dialogs that provides structured button layouts and styling options. Supports both single and dual button configurations with customizable styling variants including stroke options for visual separation from modal content.

## Aliases

- ModalFooter
- DialogFooter
- ModalActions
- DialogActions
- ModalButtons

## Props Breakdown

**Extends:** Omit<HTMLAttributes<HTMLDivElement>, 'style'> (inherits div properties except style)

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `type` | `'1Button' \| '2Buttons'` | `'1Button'` | No | Layout type - single or dual button configuration |
| `style` | `'NoStroke' \| 'WithStroke'` | `'NoStroke'` | No | Visual style variant with optional top border |
| `primaryButton` | `ReactNode` | - | No | Primary action button element |
| `secondaryButton` | `ReactNode` | - | No | Secondary action button (only for 2Buttons type) |
| `className` | `string` | - | No | Additional CSS class names |
| `children` | `ReactNode` | - | No | Custom content overriding button props |

## Examples

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

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

  return (
    <>
      <Button onClick={() => setShowModal(true)}>
        Show Info Modal
      </Button>
      
      <Modal show={showModal} onHide={() => setShowModal(false)}>
        <div className="modal-content">
          <Text type="Heading4">Information</Text>
          <Text>This is an informational modal with a single action button.</Text>
        </div>
        
        <ModalFooter
          type="1Button"
          primaryButton={
            <Button onClick={() => setShowModal(false)}>
              Got it
            </Button>
          }
        />
      </Modal>
    </>
  );
}
```

### Confirmation Modal with Two Buttons
```tsx
function ConfirmationExample() {
  const [showModal, setShowModal] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleConfirm = async () => {
    setLoading(true);
    // Simulate API call
    await new Promise(resolve => setTimeout(resolve, 2000));
    setLoading(false);
    setShowModal(false);
  };

  return (
    <>
      <Button style="Destructive" onClick={() => setShowModal(true)}>
        Delete Item
      </Button>
      
      <Modal 
        show={showModal} 
        onHide={() => setShowModal(false)}
        disableBackdropDismiss={loading}
      >
        <div className="modal-content">
          <Text type="Heading4">Confirm Deletion</Text>
          <Text>
            Are you sure you want to delete this item? This action cannot be undone.
          </Text>
        </div>
        
        <ModalFooter
          type="2Buttons"
          style="WithStroke"
          secondaryButton={
            <Button 
              type="Outlined" 
              onClick={() => setShowModal(false)}
              disabled={loading}
            >
              Cancel
            </Button>
          }
          primaryButton={
            <Button 
              style="Destructive"
              loading={loading}
              onClick={handleConfirm}
            >
              Delete
            </Button>
          }
        />
      </Modal>
    </>
  );
}
```

### Form Modal Footer
```tsx
function FormModalExample() {
  const [showModal, setShowModal] = useState(false);
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [saving, setSaving] = useState(false);

  const handleSubmit = async () => {
    setSaving(true);
    // Simulate form submission
    await new Promise(resolve => setTimeout(resolve, 1500));
    setSaving(false);
    setShowModal(false);
    setFormData({ name: '', email: '' });
  };

  const isFormValid = formData.name.trim() && formData.email.trim();

  return (
    <>
      <Button onClick={() => setShowModal(true)}>
        Add New User
      </Button>
      
      <Modal show={showModal} onHide={() => setShowModal(false)} size="Medium">
        <div className="modal-content">
          <Text type="Heading4">Add New User</Text>
          
          <FormField label="Full Name" required>
            <Input
              value={formData.name}
              onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
              placeholder="Enter full name"
            />
          </FormField>
          
          <FormField label="Email Address" required>
            <Input
              type="email"
              value={formData.email}
              onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
              placeholder="Enter email address"
            />
          </FormField>
        </div>
        
        <ModalFooter
          type="2Buttons"
          style="WithStroke"
          secondaryButton={
            <Button 
              type="Outlined" 
              onClick={() => setShowModal(false)}
              disabled={saving}
            >
              Cancel
            </Button>
          }
          primaryButton={
            <Button 
              onClick={handleSubmit}
              loading={saving}
              disabled={!isFormValid}
            >
              Add User
            </Button>
          }
        />
      </Modal>
    </>
  );
}
```

### Settings Modal Footer
```tsx
function SettingsModalExample() {
  const [showModal, setShowModal] = useState(false);
  const [settings, setSettings] = useState({
    notifications: true,
    darkMode: false,
    autoSave: true
  });
  const [hasChanges, setHasChanges] = useState(false);

  const handleSettingChange = (key, value) => {
    setSettings(prev => ({ ...prev, [key]: value }));
    setHasChanges(true);
  };

  const handleSave = () => {
    console.log('Saving settings:', settings);
    setHasChanges(false);
    setShowModal(false);
  };

  const handleReset = () => {
    setSettings({
      notifications: true,
      darkMode: false,
      autoSave: true
    });
    setHasChanges(false);
  };

  return (
    <>
      <Button onClick={() => setShowModal(true)}>
        Settings
      </Button>
      
      <Modal show={showModal} onHide={() => setShowModal(false)}>
        <div className="modal-content">
          <Text type="Heading4">Application Settings</Text>
          
          <div className="settings-list">
            <FormField label="Enable Notifications">
              <Toggle
                checked={settings.notifications}
                onChange={(checked) => handleSettingChange('notifications', checked)}
              />
            </FormField>
            
            <FormField label="Dark Mode">
              <Toggle
                checked={settings.darkMode}
                onChange={(checked) => handleSettingChange('darkMode', checked)}
              />
            </FormField>
            
            <FormField label="Auto Save">
              <Toggle
                checked={settings.autoSave}
                onChange={(checked) => handleSettingChange('autoSave', checked)}
              />
            </FormField>
          </div>
        </div>
        
        <ModalFooter
          type="2Buttons"
          style="WithStroke"
          secondaryButton={
            <ButtonGroup>
              <Button 
                type="Text" 
                onClick={handleReset}
                disabled={!hasChanges}
              >
                Reset
              </Button>
              <Button 
                type="Outlined" 
                onClick={() => setShowModal(false)}
              >
                Cancel
              </Button>
            </ButtonGroup>
          }
          primaryButton={
            <Button 
              onClick={handleSave}
              disabled={!hasChanges}
            >
              Save Changes
            </Button>
          }
        />
      </Modal>
    </>
  );
}
```

### Custom Footer Content
```tsx
function CustomFooterExample() {
  const [showModal, setShowModal] = useState(false);
  const [step, setStep] = useState(1);
  const totalSteps = 3;

  const nextStep = () => setStep(prev => Math.min(prev + 1, totalSteps));
  const prevStep = () => setStep(prev => Math.max(prev - 1, 1));

  return (
    <>
      <Button onClick={() => setShowModal(true)}>
        Start Wizard
      </Button>
      
      <Modal show={showModal} onHide={() => setShowModal(false)}>
        <div className="modal-content">
          <Text type="Heading4">Setup Wizard - Step {step} of {totalSteps}</Text>
          
          {step === 1 && (
            <div>
              <Text>Welcome to the setup wizard. We'll help you get started.</Text>
            </div>
          )}
          
          {step === 2 && (
            <div>
              <Text>Please configure your preferences.</Text>
              <FormField label="Your Name">
                <Input placeholder="Enter your name" />
              </FormField>
            </div>
          )}
          
          {step === 3 && (
            <div>
              <Text>Setup complete! You're ready to go.</Text>
            </div>
          )}
        </div>
        
        <ModalFooter style="WithStroke">
          <div className="wizard-footer">
            <div className="step-indicator">
              {Array.from({ length: totalSteps }, (_, i) => (
                <div 
                  key={i}
                  className={`step-dot ${i + 1 <= step ? 'active' : ''}`}
                />
              ))}
            </div>
            
            <div className="wizard-actions">
              <Button 
                type="Outlined"
                onClick={step === 1 ? () => setShowModal(false) : prevStep}
              >
                {step === 1 ? 'Cancel' : 'Back'}
              </Button>
              
              <Button 
                onClick={step === totalSteps ? () => setShowModal(false) : nextStep}
              >
                {step === totalSteps ? 'Finish' : 'Next'}
              </Button>
            </div>
          </div>
        </ModalFooter>
      </Modal>
    </>
  );
}
```

### Save Draft Modal
```tsx
function SaveDraftExample() {
  const [showModal, setShowModal] = useState(false);
  const [content, setContent] = useState('');
  const [saving, setSaving] = useState(false);

  const handleSaveDraft = async () => {
    setSaving(true);
    // Simulate saving draft
    await new Promise(resolve => setTimeout(resolve, 1000));
    setSaving(false);
    setShowModal(false);
  };

  const handlePublish = async () => {
    setSaving(true);
    // Simulate publishing
    await new Promise(resolve => setTimeout(resolve, 2000));
    setSaving(false);
    setShowModal(false);
  };

  return (
    <>
      <Button onClick={() => setShowModal(true)}>
        Create Post
      </Button>
      
      <Modal show={showModal} onHide={() => setShowModal(false)} size="Large">
        <div className="modal-content">
          <Text type="Heading4">Create New Post</Text>
          
          <FormField label="Post Content">
            <TextArea
              value={content}
              onChange={(e) => setContent(e.target.value)}
              placeholder="Write your post content here..."
              rows={6}
            />
          </FormField>
        </div>
        
        <ModalFooter style="WithStroke">
          <div className="post-footer">
            <div className="post-info">
              <Text type="BodySmall">
                {content.length} characters
              </Text>
            </div>
            
            <div className="post-actions">
              <Button 
                type="Text" 
                onClick={() => setShowModal(false)}
                disabled={saving}
              >
                Discard
              </Button>
              
              <Button 
                type="Outlined"
                onClick={handleSaveDraft}
                loading={saving}
                disabled={!content.trim()}
              >
                Save Draft
              </Button>
              
              <Button 
                onClick={handlePublish}
                loading={saving}
                disabled={!content.trim()}
              >
                Publish
              </Button>
            </div>
          </div>
        </ModalFooter>
      </Modal>
    </>
  );
}
```

### Error Modal Footer
```tsx
function ErrorModalExample() {
  const [showModal, setShowModal] = useState(false);
  const [error] = useState({
    title: 'Connection Error',
    message: 'Unable to connect to the server. Please check your internet connection and try again.',
    details: 'Error code: 500 - Internal Server Error'
  });

  const handleRetry = () => {
    // Simulate retry logic
    console.log('Retrying...');
    setShowModal(false);
  };

  return (
    <>
      <Button onClick={() => setShowModal(true)}>
        Trigger Error
      </Button>
      
      <Modal show={showModal} onHide={() => setShowModal(false)}>
        <div className="modal-content error-modal">
          <div className="error-icon">
            <Icon icon="Error" size="Large" className="error-icon-style" />
          </div>
          
          <Text type="Heading4">{error.title}</Text>
          <Text type="Body">{error.message}</Text>
          
          <details className="error-details">
            <summary>Technical Details</summary>
            <Text type="BodySmall" className="error-details-text">
              {error.details}
            </Text>
          </details>
        </div>
        
        <ModalFooter
          type="2Buttons"
          style="WithStroke"
          secondaryButton={
            <Button 
              type="Outlined" 
              onClick={() => setShowModal(false)}
            >
              Close
            </Button>
          }
          primaryButton={
            <Button onClick={handleRetry}>
              Retry
            </Button>
          }
        />
      </Modal>
    </>
  );
}
```

### Terms and Conditions Modal
```tsx
function TermsModalExample() {
  const [showModal, setShowModal] = useState(false);
  const [accepted, setAccepted] = useState(false);
  const [scrolledToBottom, setScrolledToBottom] = useState(false);

  const handleScroll = (event) => {
    const { scrollTop, scrollHeight, clientHeight } = event.target;
    const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10;
    setScrolledToBottom(isAtBottom);
  };

  const handleAccept = () => {
    setAccepted(true);
    setShowModal(false);
    console.log('Terms accepted');
  };

  return (
    <>
      <Button onClick={() => setShowModal(true)}>
        View Terms & Conditions
      </Button>
      
      <Modal show={showModal} onHide={() => setShowModal(false)} size="Large">
        <div className="modal-content">
          <Text type="Heading4">Terms and Conditions</Text>
          
          <div 
            className="terms-content"
            onScroll={handleScroll}
            style={{ 
              maxHeight: '400px', 
              overflowY: 'auto',
              border: '1px solid #ccc',
              padding: '16px',
              marginBottom: '16px'
            }}
          >
            <Text type="Body">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod 
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
              veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
              commodo consequat...
            </Text>
            
            <Text type="Body">
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
              dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
              proident, sunt in culpa qui officia deserunt mollit anim id est laborum...
            </Text>
            
            {/* Add more content to make it scrollable */}
            {Array.from({ length: 20 }, (_, i) => (
              <Text key={i} type="Body">
                Section {i + 1}: Additional terms and conditions content that requires 
                scrolling to read completely...
              </Text>
            ))}
          </div>
          
          <FormField>
            <Checkbox
              checked={accepted}
              onChange={setAccepted}
              label="I have read and accept the terms and conditions"
              disabled={!scrolledToBottom}
            />
          </FormField>
        </div>
        
        <ModalFooter
          type="2Buttons"
          style="WithStroke"
          secondaryButton={
            <Button 
              type="Outlined" 
              onClick={() => setShowModal(false)}
            >
              Cancel
            </Button>
          }
          primaryButton={
            <Button 
              onClick={handleAccept}
              disabled={!accepted || !scrolledToBottom}
            >
              Accept & Continue
            </Button>
          }
        />
      </Modal>
    </>
  );
}
```

### Loading Modal Footer
```tsx
function LoadingModalExample() {
  const [showModal, setShowModal] = useState(false);
  const [uploadProgress, setUploadProgress] = useState(0);
  const [isUploading, setIsUploading] = useState(false);

  const simulateUpload = async () => {
    setIsUploading(true);
    setUploadProgress(0);
    
    // Simulate upload progress
    for (let i = 0; i <= 100; i += 10) {
      await new Promise(resolve => setTimeout(resolve, 200));
      setUploadProgress(i);
    }
    
    setIsUploading(false);
  };

  const startUpload = () => {
    setShowModal(true);
    simulateUpload();
  };

  return (
    <>
      <Button onClick={startUpload}>
        Upload File
      </Button>
      
      <Modal 
        show={showModal} 
        onHide={() => setShowModal(false)}
        disableBackdropDismiss={isUploading}
      >
        <div className="modal-content">
          <Text type="Heading4">File Upload</Text>
          
          <div className="upload-progress">
            <Text type="Body">
              {isUploading ? 'Uploading...' : 'Upload Complete!'}
            </Text>
            
            <ProgressBar 
              value={uploadProgress}
              max={100}
              className="upload-progress-bar"
            />
            
            <Text type="BodySmall">
              {uploadProgress}% complete
            </Text>
          </div>
        </div>
        
        <ModalFooter
          type={isUploading ? "1Button" : "2Buttons"}
          style="WithStroke"
          secondaryButton={
            !isUploading ? (
              <Button 
                type="Outlined" 
                onClick={() => setShowModal(false)}
              >
                Close
              </Button>
            ) : undefined
          }
          primaryButton={
            isUploading ? (
              <Button disabled loading>
                Uploading...
              </Button>
            ) : (
              <Button onClick={() => setShowModal(false)}>
                Done
              </Button>
            )
          }
        />
      </Modal>
    </>
  );
}
```