# AccordionGroup

## Description

A container component that manages multiple accordion components as a group. Provides coordinated behavior for multiple accordions, allowing for controlled expansion/collapse patterns, mutual exclusivity, and shared state management across accordion items.

## Aliases

- AccordionGroup
- AccordionContainer
- AccordionPanel
- CollapsibleGroup
- AccordionSet

## Props Breakdown

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

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `children` | `ReactNode` | - | Yes | Accordion components to be grouped together |
| `className` | `string` | - | No | Additional CSS class names |
| `name` | `string` | - | No | Unique identifier for the accordion group |

## Examples

### Basic Usage
```tsx
import { AccordionGroup, Accordion, AccordionSummary, AccordionDetails, Text } from '@delightui/components';

function BasicExample() {
  return (
    <AccordionGroup>
      <Accordion>
        <AccordionSummary>
          <Text type="Heading6">Section 1</Text>
        </AccordionSummary>
        <AccordionDetails>
          <Text type="BodyMedium">Content for the first section.</Text>
        </AccordionDetails>
      </Accordion>
      
      <Accordion>
        <AccordionSummary>
          <Text type="Heading6">Section 2</Text>
        </AccordionSummary>
        <AccordionDetails>
          <Text type="BodyMedium">Content for the second section.</Text>
        </AccordionDetails>
      </Accordion>
    </AccordionGroup>
  );
}
```

### FAQ Section
```tsx
function FAQExample() {
  const faqs = [
    {
      question: "What is your return policy?",
      answer: "We offer a 30-day return policy for all items in original condition."
    },
    {
      question: "How long does shipping take?",
      answer: "Standard shipping takes 3-5 business days, express shipping takes 1-2 business days."
    },
    {
      question: "Do you offer international shipping?",
      answer: "Yes, we ship to over 100 countries worldwide with varying delivery times."
    },
    {
      question: "How can I track my order?",
      answer: "You'll receive a tracking number via email once your order ships."
    }
  ];

  return (
    <AccordionGroup name="faq-section" className="faq-container">
      {faqs.map((faq, index) => (
        <Accordion key={index} name={`faq-${index}`}>
          <AccordionSummary>
            <Text type="Heading6">{faq.question}</Text>
          </AccordionSummary>
          <AccordionDetails>
            <Text type="BodyMedium">{faq.answer}</Text>
          </AccordionDetails>
        </Accordion>
      ))}
    </AccordionGroup>
  );
}
```

### Settings Panel
```tsx
function SettingsPanelExample() {
  return (
    <AccordionGroup name="settings-panel" className="settings-container">
      <Accordion>
        <AccordionSummary>
          <div className="settings-header">
            <Icon icon="Person" />
            <Text type="Heading6">Account Settings</Text>
          </div>
        </AccordionSummary>
        <AccordionDetails>
          <FormField name="email" label="Email Address">
            <Input placeholder="your@email.com" />
          </FormField>
          <FormField name="password" label="Password">
            <Password placeholder="Enter new password" />
          </FormField>
          <Button size="Small">Update Account</Button>
        </AccordionDetails>
      </Accordion>
      
      <Accordion>
        <AccordionSummary>
          <div className="settings-header">
            <Icon icon="Notifications" />
            <Text type="Heading6">Notification Preferences</Text>
          </div>
        </AccordionSummary>
        <AccordionDetails>
          <FormField name="email-notifications">
            <Checkbox>Email notifications</Checkbox>
          </FormField>
          <FormField name="push-notifications">
            <Checkbox>Push notifications</Checkbox>
          </FormField>
          <FormField name="sms-notifications">
            <Checkbox>SMS notifications</Checkbox>
          </FormField>
          <Button size="Small">Save Preferences</Button>
        </AccordionDetails>
      </Accordion>
      
      <Accordion>
        <AccordionSummary>
          <div className="settings-header">
            <Icon icon="Security" />
            <Text type="Heading6">Privacy & Security</Text>
          </div>
        </AccordionSummary>
        <AccordionDetails>
          <FormField name="two-factor">
            <Checkbox>Enable two-factor authentication</Checkbox>
          </FormField>
          <FormField name="profile-visibility" label="Profile Visibility">
            <Select>
              <Option value="public">Public</Option>
              <Option value="friends">Friends Only</Option>
              <Option value="private">Private</Option>
            </Select>
          </FormField>
          <Button size="Small">Update Security</Button>
        </AccordionDetails>
      </Accordion>
    </AccordionGroup>
  );
}
```

### Product Categories
```tsx
function ProductCategoriesExample() {
  const categories = [
    {
      name: "Electronics",
      items: ["Smartphones", "Laptops", "Tablets", "Accessories"]
    },
    {
      name: "Clothing",
      items: ["Shirts", "Pants", "Dresses", "Shoes"]
    },
    {
      name: "Home & Garden",
      items: ["Furniture", "Appliances", "Decor", "Tools"]
    }
  ];

  return (
    <AccordionGroup name="product-categories" className="category-browser">
      {categories.map((category, index) => (
        <Accordion key={index} name={`category-${index}`}>
          <AccordionSummary>
            <div className="category-header">
              <Text type="Heading6">{category.name}</Text>
              <Chip size="Small" style="B">{category.items.length} items</Chip>
            </div>
          </AccordionSummary>
          <AccordionDetails>
            <List 
              data={category.items}
              component={({ item }) => (
                <ListItem>
                  <Text type="BodyMedium">{item}</Text>
                  <IconButton icon="ArrowForward" size="Small" />
                </ListItem>
              )}
            />
          </AccordionDetails>
        </Accordion>
      ))}
    </AccordionGroup>
  );
}
```

### Help Documentation
```tsx
function HelpDocumentationExample() {
  return (
    <AccordionGroup name="help-docs" className="help-container">
      <Accordion defaultExpanded>
        <AccordionSummary>
          <div className="help-header">
            <Icon icon="Help" />
            <Text type="Heading6">Getting Started</Text>
            <Chip size="Small" style="A">New</Chip>
          </div>
        </AccordionSummary>
        <AccordionDetails>
          <Text type="BodyMedium">
            Welcome to our platform! Here's everything you need to know to get started.
          </Text>
          <List 
            data={["Create your account", "Set up your profile", "Explore features", "Connect with others"]}
            component={({ item, index }) => (
              <ListItem>
                <Text type="BodySmall">{index + 1}. {item}</Text>
              </ListItem>
            )}
          />
          <Button size="Small">Start Tutorial</Button>
        </AccordionDetails>
      </Accordion>
      
      <Accordion>
        <AccordionSummary>
          <div className="help-header">
            <Icon icon="Settings" />
            <Text type="Heading6">Advanced Features</Text>
          </div>
        </AccordionSummary>
        <AccordionDetails>
          <Text type="BodyMedium">
            Discover powerful features for advanced users.
          </Text>
          <ButtonGroup>
            <Button size="Small" type="Outlined">API Documentation</Button>
            <Button size="Small" type="Outlined">Integration Guide</Button>
          </ButtonGroup>
        </AccordionDetails>
      </Accordion>
      
      <Accordion>
        <AccordionSummary>
          <div className="help-header">
            <Icon icon="Error" />
            <Text type="Heading6">Troubleshooting</Text>
          </div>
        </AccordionSummary>
        <AccordionDetails>
          <Text type="BodyMedium">
            Common issues and their solutions.
          </Text>
          <Accordion size="Small">
            <AccordionSummary>
              <Text type="BodyMedium">Login Issues</Text>
            </AccordionSummary>
            <AccordionDetails>
              <Text type="BodySmall">
                Try resetting your password or clearing browser cache.
              </Text>
            </AccordionDetails>
          </Accordion>
        </AccordionDetails>
      </Accordion>
    </AccordionGroup>
  );
}
```

### Controlled Group State
```tsx
function ControlledGroupExample() {
  const [openAccordion, setOpenAccordion] = useState('general');

  const handleAccordionChange = (accordionName, isOpen) => {
    setOpenAccordion(isOpen ? accordionName : null);
  };

  const sections = [
    { name: 'general', title: 'General Settings', icon: 'Settings' },
    { name: 'billing', title: 'Billing Information', icon: 'CreditCard' },
    { name: 'notifications', title: 'Notifications', icon: 'Notifications' },
    { name: 'security', title: 'Security', icon: 'Security' }
  ];

  return (
    <AccordionGroup name="controlled-settings">
      {sections.map(section => (
        <Accordion
          key={section.name}
          name={section.name}
          expanded={openAccordion === section.name}
          onChange={(isOpen) => handleAccordionChange(section.name, isOpen)}
        >
          <AccordionSummary>
            <div className="section-header">
              <Icon icon={section.icon} />
              <Text type="Heading6">{section.title}</Text>
              {openAccordion === section.name && (
                <Chip size="Small" style="A">Active</Chip>
              )}
            </div>
          </AccordionSummary>
          <AccordionDetails>
            <Text type="BodyMedium">
              Settings for {section.title.toLowerCase()}.
            </Text>
            <Button size="Small">Configure</Button>
          </AccordionDetails>
        </Accordion>
      ))}
    </AccordionGroup>
  );
}
```

### Nested Accordion Groups
```tsx
function NestedGroupExample() {
  return (
    <AccordionGroup name="main-navigation" className="main-nav">
      <Accordion>
        <AccordionSummary>
          <Text type="Heading5">Dashboard</Text>
        </AccordionSummary>
        <AccordionDetails>
          <AccordionGroup name="dashboard-sub">
            <Accordion size="Small">
              <AccordionSummary>
                <Text type="BodyMedium">Analytics</Text>
              </AccordionSummary>
              <AccordionDetails>
                <List 
                  data={["Overview", "Traffic", "Conversions", "Revenue"]}
                  component={({ item }) => (
                    <ListItem>
                      <Text type="BodySmall">{item}</Text>
                    </ListItem>
                  )}
                />
              </AccordionDetails>
            </Accordion>
            
            <Accordion size="Small">
              <AccordionSummary>
                <Text type="BodyMedium">Reports</Text>
              </AccordionSummary>
              <AccordionDetails>
                <List 
                  data={["Daily", "Weekly", "Monthly", "Custom"]}
                  component={({ item }) => (
                    <ListItem>
                      <Text type="BodySmall">{item}</Text>
                    </ListItem>
                  )}
                />
              </AccordionDetails>
            </Accordion>
          </AccordionGroup>
        </AccordionDetails>
      </Accordion>
      
      <Accordion>
        <AccordionSummary>
          <Text type="Heading5">Settings</Text>
        </AccordionSummary>
        <AccordionDetails>
          <AccordionGroup name="settings-sub">
            <Accordion size="Small">
              <AccordionSummary>
                <Text type="BodyMedium">User Management</Text>
              </AccordionSummary>
              <AccordionDetails>
                <ButtonGroup>
                  <Button size="Small" type="Outlined">Add User</Button>
                  <Button size="Small" type="Outlined">Manage Roles</Button>
                </ButtonGroup>
              </AccordionDetails>
            </Accordion>
          </AccordionGroup>
        </AccordionDetails>
      </Accordion>
    </AccordionGroup>
  );
}
```

### Interactive Filter Panel
```tsx
function FilterPanelExample() {
  const [selectedFilters, setSelectedFilters] = useState({
    category: [],
    price: [],
    rating: [],
    features: []
  });

  const updateFilter = (filterType, value, checked) => {
    setSelectedFilters(prev => ({
      ...prev,
      [filterType]: checked 
        ? [...prev[filterType], value]
        : prev[filterType].filter(item => item !== value)
    }));
  };

  return (
    <AccordionGroup name="filter-panel" className="filter-container">
      <Accordion defaultExpanded>
        <AccordionSummary>
          <div className="filter-header">
            <Text type="Heading6">Category</Text>
            {selectedFilters.category.length > 0 && (
              <Chip size="Small" style="A">
                {selectedFilters.category.length} selected
              </Chip>
            )}
          </div>
        </AccordionSummary>
        <AccordionDetails>
          {['Electronics', 'Clothing', 'Home', 'Sports'].map(category => (
            <FormField key={category} name={category}>
              <Checkbox
                checked={selectedFilters.category.includes(category)}
                onValueChange={(checked) => updateFilter('category', category, checked)}
              >
                {category}
              </Checkbox>
            </FormField>
          ))}
        </AccordionDetails>
      </Accordion>
      
      <Accordion>
        <AccordionSummary>
          <div className="filter-header">
            <Text type="Heading6">Price Range</Text>
            {selectedFilters.price.length > 0 && (
              <Chip size="Small" style="A">
                {selectedFilters.price.length} selected
              </Chip>
            )}
          </div>
        </AccordionSummary>
        <AccordionDetails>
          {['Under $25', '$25 - $50', '$50 - $100', 'Over $100'].map(price => (
            <FormField key={price} name={price}>
              <Checkbox
                checked={selectedFilters.price.includes(price)}
                onValueChange={(checked) => updateFilter('price', price, checked)}
              >
                {price}
              </Checkbox>
            </FormField>
          ))}
        </AccordionDetails>
      </Accordion>
      
      <div className="filter-actions">
        <Button size="Small">Apply Filters</Button>
        <Button size="Small" type="Outlined" onClick={() => setSelectedFilters({
          category: [], price: [], rating: [], features: []
        })}>
          Clear All
        </Button>
      </div>
    </AccordionGroup>
  );
}
```

### Timeline Accordion Group
```tsx
function TimelineExample() {
  const timelineEvents = [
    {
      date: "2024-01-15",
      title: "Project Started",
      description: "Initial project setup and planning phase completed."
    },
    {
      date: "2024-02-01",
      title: "Development Phase",
      description: "Core development work began with team collaboration."
    },
    {
      date: "2024-02-28",
      title: "Testing & QA",
      description: "Comprehensive testing and quality assurance procedures."
    },
    {
      date: "2024-03-15",
      title: "Launch Preparation",
      description: "Final preparations and deployment configurations."
    }
  ];

  return (
    <AccordionGroup name="project-timeline" className="timeline-container">
      {timelineEvents.map((event, index) => (
        <Accordion key={index} name={`timeline-${index}`}>
          <AccordionSummary>
            <div className="timeline-header">
              <div className="timeline-date">
                <Text type="BodySmall">{event.date}</Text>
              </div>
              <div className="timeline-title">
                <Text type="Heading6">{event.title}</Text>
              </div>
              <div className="timeline-status">
                <Chip size="Small" style={index === 0 ? "A" : "B"}>
                  {index === 0 ? "Current" : "Completed"}
                </Chip>
              </div>
            </div>
          </AccordionSummary>
          <AccordionDetails>
            <Text type="BodyMedium">{event.description}</Text>
            <div className="timeline-actions">
              <Button size="Small" type="Outlined">View Details</Button>
              <Button size="Small" type="Ghost">
                <Icon icon="MoreHorizontal" />
              </Button>
            </div>
          </AccordionDetails>
        </Accordion>
      ))}
    </AccordionGroup>
  );
}
```