"use client";

import React from "react";
import SeaQaTopicList from "./SeaQaTopicList";
import SeaQaCTA from "./SeaQaCTA";
import SeaQaTopicListSkeleton from "@/components/skeleton/SeaQaTopicListSkeleton";
import { ICategory } from "@/api/types/common";
import SubscriptionCard from "@/components/Membership/SubscriptionCard";

interface SeaQaSidebarProps {
  topics: ICategory[];
  selectedTopics: number[];
  onToggleTopic: (id: number) => void;
  onClearTopics?: () => void;
  isLoading?: boolean;
  onLoginClick?: () => void;
}

const SeaQaSidebar: React.FC<SeaQaSidebarProps> = ({
  topics,
  selectedTopics,
  onToggleTopic,
  onClearTopics,
  isLoading = false,
  onLoginClick,
}) => {
  return (
    <div className="flex flex-col gap-4">
      {isLoading ? (
        <SeaQaTopicListSkeleton />
      ) : (
        <SeaQaTopicList
          topics={topics}
          selectedTopics={selectedTopics}
          onToggleTopic={onToggleTopic}
          onClearAll={onClearTopics}
        />
      )}
      {/* <SeaQaCTA onLoginClick={onLoginClick} /> */}
      <SubscriptionCard onLoginClick={onLoginClick} />
    </div>
  );
};

export default SeaQaSidebar;