"use client";

import { useState } from "react";
import { FAQCategory } from "@/lib/types/models";

interface TopicSidebarProps {
  topics: FAQCategory[];
  selectedIndex: number;
  onSelectTopic: (index: number) => void;
}

export default function Page({
  topics = [],
  selectedIndex,
  onSelectTopic,
}: TopicSidebarProps) {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <div className="lg:col-span-1">
      <div className="bg-white overflow-hidden top-4">
        {/* Header */}
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="w-full flex items-center justify-between bg-neutral-700 text-white px-4 py-3 font-semibold hover:bg-neutral-800 transition-colors lg:cursor-default lg:opacity-100"
        >
          FAQ TOPICS
        </button>

        {/* Topics List */}
        <div
          className={`overflow-hidden transition-all duration-200 ${
            isOpen ? "max-h-96" : "max-h-0"
          } lg:max-h-none`}
        >
          <nav>
            {topics.length > 0 ? (
              topics.map((topic, index) => (
                <button
                  key={topic?._id || index}
                  onClick={() => {
                    onSelectTopic(index);
                    setIsOpen(false);
                  }}
                  className={`w-full text-left px-4 py-3 transition-colors border-b border-gray-200 ${
                    selectedIndex === index
                      ? "text-[#02bc71] font-medium"
                      : "text-neutral-700 hover:text-[#02bc71]"
                  }`}
                >
                  {topic?.name}
                </button>
              ))
            ) : (
              <p className="px-4 py-3 text-neutral-500 text-sm">
                No FAQ topics available
              </p>
            )}
          </nav>
        </div>
      </div>
    </div>
  );
}