FAQ Search

"use client";
 
import { useState, useMemo } from "react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Search, X } from "lucide-react";
 
interface FAQItem {
  id: string;
  question: string;
  answer: string;
  category?: string;
}
 
interface FAQSearchProps {
  title?: string;
  description?: string;
  faqs: FAQItem[];
  placeholder?: string;
  className?: string;
}
 
export function FAQSearch({
  title = "Frequently Asked Questions",
  description = "Search through our knowledge base to find answers",
  faqs,
  placeholder = "Search for questions...",
  className = "",
}: FAQSearchProps) {
  const [searchQuery, setSearchQuery] = useState("");
 
  // Filter FAQs based on search query
  const filteredFAQs = useMemo(() => {
    if (!searchQuery.trim()) {
      return faqs;
    }
 
    const query = searchQuery.toLowerCase();
    return faqs.filter(
      (faq) =>
        faq.question.toLowerCase().includes(query) ||
        faq.answer.toLowerCase().includes(query) ||
        faq.category?.toLowerCase().includes(query),
    );
  }, [faqs, searchQuery]);
 
  const handleClear = () => {
    setSearchQuery("");
  };
 
  return (
    <section className={`w-full bg-black py-20 ${className}`}>
      <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="mb-12 text-center">
          <h2 className="mb-4 text-4xl font-bold text-white sm:text-5xl">
            {title}
          </h2>
          <p className="text-lg text-zinc-400">{description}</p>
        </div>
 
        {/* Search Bar */}
        <div className="mb-8">
          <div className="relative">
            <Search className="absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-zinc-500" />
            <input
              type="text"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              placeholder={placeholder}
              className="w-full rounded-xl border border-zinc-800 bg-zinc-950 py-4 pl-12 pr-12 text-white placeholder-zinc-500 transition-all focus:border-orange-500/50 focus:outline-none focus:ring-2 focus:ring-orange-500/20"
            />
            {searchQuery && (
              <button
                onClick={handleClear}
                className="absolute right-4 top-1/2 -translate-y-1/2 rounded-lg p-1 text-zinc-500 transition-colors hover:bg-zinc-800 hover:text-white"
                aria-label="Clear search"
              >
                <X className="h-5 w-5" />
              </button>
            )}
          </div>
 
          {/* Search Results Count */}
          {searchQuery && (
            <div className="mt-3 text-sm text-zinc-500">
              {filteredFAQs.length === 0 ? (
                <span>No results found for "{searchQuery}"</span>
              ) : (
                <span>
                  Found {filteredFAQs.length}{" "}
                  {filteredFAQs.length === 1 ? "result" : "results"}
                </span>
              )}
            </div>
          )}
        </div>
 
        {/* FAQs */}
        {filteredFAQs.length > 0 ? (
          <Accordion type="single" collapsible className="space-y-3">
            {filteredFAQs.map((faq) => (
              <AccordionItem
                key={faq.id}
                value={faq.id}
                className="rounded-xl border border-zinc-800 bg-zinc-950 px-6 data-[state=open]:border-orange-500/50"
              >
                <AccordionTrigger className="text-left text-base font-semibold text-white hover:text-orange-500 hover:no-underline">
                  <div className="flex flex-col items-start gap-2">
                    <span>{faq.question}</span>
                    {faq.category && (
                      <span className="rounded-full bg-orange-500/10 px-3 py-1 text-xs font-medium text-orange-500">
                        {faq.category}
                      </span>
                    )}
                  </div>
                </AccordionTrigger>
                <AccordionContent className="text-zinc-400">
                  {faq.answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        ) : (
          <div className="rounded-xl border border-zinc-800 bg-zinc-950 p-12 text-center">
            <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-zinc-900">
              <Search className="h-8 w-8 text-zinc-600" />
            </div>
            <h3 className="mb-2 text-xl font-semibold text-white">
              No results found
            </h3>
            <p className="text-zinc-500">
              Try adjusting your search terms or browse all questions below
            </p>
            <button
              onClick={handleClear}
              className="mt-4 text-sm text-orange-500 hover:text-orange-400"
            >
              Clear search
            </button>
          </div>
        )}
 
        {/* CTA */}
        <div className="mt-12 rounded-2xl border border-zinc-800 bg-zinc-950 p-8 text-center">
          <h3 className="mb-2 text-xl font-bold text-white">
            Can't find what you're looking for?
          </h3>
          <p className="mb-6 text-zinc-400">
            Our support team is ready to help you with any questions
          </p>
          <a
            href="#contact"
            className="inline-flex items-center gap-2 rounded-lg bg-orange-600 px-6 py-3 font-semibold text-white transition-all hover:bg-orange-700"
          >
            Contact Support
          </a>
        </div>
      </div>
    </section>
  );
}