FAQ

<FodFaq Title="Frequently Asked Questions"
        Subtitle="Answers to common questions"
        Items="@_faqItems"
        ShowSearch="false" />

@code {
    private List<FaqItem> _faqItems =
    [
        new FaqItem
        {
            Id = "1",
            Question = new MultilingualText { ["en"] = "What is FodFaq?" },
            Answer = new MultilingualText { ["en"] = "FodFaq displays FAQs in accordion format." },
            Order = 1
        }
    ];
}

@* Title and Subtitle *@
<FodFaq Title="Getting Started"
        Subtitle="Everything you need to know"
        Items="@_items" />



@* Custom Header Content *@
<FodFaq Items="@_items">
    <HeaderContent>
        <div class="custom-header">
            <FodIcon Icon="IconName.Help" />
            <h2>Need Help?</h2>
        </div>
    </HeaderContent>
</FodFaq>

<FodFaq Items="@_faqItems" />

@code {
    private List<FaqItem> _faqItems =
    [
        new FaqItem
        {
            Id = "1",
            Question = new MultilingualText { ["en"] = "Question?" },
            Answer = new MultilingualText { ["en"] = "Answer." },
            Order = 1
        }
    ];
}

<FodFaq Items="@_faqItems"
        ShowSearch="true"
        SearchPlaceholder="Search FAQs..."
        OnSearchPerformed="HandleSearch" />

@code {
    private void HandleSearch(string query)
    {
        Console.WriteLine($"Search: {query}");
    }
}

@* Single Mode - only one FAQ expanded at a time *@
<FodFaq Items="@_items" Mode="AccordionMode.Single" />



@* Multiple Mode - multiple FAQs can be expanded *@
<FodFaq Items="@_items" Mode="AccordionMode.Multiple" />

@* Loading state is automatic when using ServiceId *@
<FodFaq ServiceId="my-service-id" SkeletonCount="5" />



@* SkeletonCount controls placeholder quantity *@
<FodFaq ServiceId="service" SkeletonCount="3" />

@* Simple message *@
<FodFaq Items="@emptyList" EmptyStateMessage="No FAQs found." />



@* Message with subtext *@
<FodFaq Items="@emptyList"
        EmptyStateMessage="No results found"
        EmptyStateSubtext="Try adjusting your search." />



@* Custom template *@
<FodFaq Items="@emptyList">
    <EmptyStateTemplate>
        <div class="custom-empty-state">
            <FodIcon Icon="IconName.Help" />
            <p>No FAQs available yet.</p>
        </div>
    </EmptyStateTemplate>
</FodFaq>

<FodFaq Items="@_items">
    <AnswerTemplate Context="faqItem">
        <div class="custom-answer">
            <p>@faqItem.Answer.GetLocalized()</p>
            @if (faqItem.Keywords?.Any() == true)
            {
                
<div class="keywords">
    @foreach (var keyword in faqItem.Keywords)
                        
    {
                            
    <span class="keyword">@keyword</span>
                        
    }
</div>
            }
        </div>
    </AnswerTemplate>
</FodFaq>

<FodFaq Items="@_items"
        OnFaqExpanded="HandleExpanded"
        OnSearchPerformed="HandleSearch" />

@code {
    private void HandleExpanded(FaqItem item)
    {
        Console.WriteLine($"Expanded: {item.Question}");
    }

    private void HandleSearch(string query)
    {
        Console.WriteLine($"Search: {query}");
    }
}

@* API-driven mode - fetches from Info Portal *@
<FodFaq ServiceId="EVOweb home"
        Title="EVO Web FAQ"
        Subtitle="Frequently asked questions fetched from Info Portal API"
        SkeletonCount="5"
        ShowSearch="true"
        SearchPlaceholder="Search EVO questions..." />



@* The component handles:
   - Loading state with skeletons
   - Error handling (shows empty state on failure)
   - Multilingual content based on current culture
   - Search filtering on fetched data *@