"use client";

import React from "react";
import { ICategory } from "@/api/types/common";

interface SeaQaTopicListProps {
  topics: ICategory[];
  selectedTopics: number[];
  onToggleTopic: (id: number) => void;
  onClearAll?: () => void;
}

const SeaQaTopicList: React.FC<SeaQaTopicListProps> = ({
  topics,
  selectedTopics,
  onToggleTopic,
  onClearAll,
}) => {
  const selectedItems = topics.filter((t) => selectedTopics.includes(t.id));

  return (
    <div className="bg-white rounded-2xl p-5 flex flex-col gap-3.5">
      <p className="text-[11px] font-bold text-[#9ca3af] uppercase tracking-[.1em]">
        TOPICS
      </p>

      <div className="flex flex-wrap gap-2.5">
        {topics.map((topic) => {
          const isSelected = selectedTopics.includes(topic.id);
          return (
            <button
              key={topic.id}
              onClick={() => onToggleTopic(topic.id)}
              className={`inline-flex items-center gap-1 px-3 py-1 rounded-full text-[12px] font-medium cursor-pointer transition-all ${
                isSelected
                  ? "border-2 border-[#3b82f6] text-[#1e293b] font-semibold"
                  : "border border-[#94a3b8] text-[#475569] hover:border-[#475569] hover:text-[#1e293b]"
              }`}
            >
              {isSelected && (
                <svg
                  width="12"
                  height="12"
                  fill="none"
                  stroke="#3b82f6"
                  strokeWidth="2.5"
                  viewBox="0 0 24 24"
                  className="shrink-0"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    d="M5 13l4 4L19 7"
                  />
                </svg>
              )}
              {topic.name}
            </button>
          );
        })}
      </div>

      {selectedItems.length > 0 && (
        <div className="border-t border-[#f3f4f6] pt-3 flex flex-col gap-2">
          <div className="flex items-center justify-between">
            <span className="text-[11px] font-bold text-[#9ca3af] uppercase tracking-[.1em]">
              Selected
            </span>
            <button
              onClick={onClearAll}
              className="text-[12px] font-medium text-[#3b82f6] hover:text-[#1d4ed8] bg-transparent border-none cursor-pointer transition-colors"
            >
              Clear all
            </button>
          </div>
          <div className="flex flex-wrap gap-2">
            {selectedItems.map((topic) => (
              <button
                key={topic.id}
                onClick={() => onToggleTopic(topic.id)}
                className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-[12px] font-semibold border-2 border-[#3b82f6] text-[#1e293b] cursor-pointer hover:bg-[#eff6ff] transition-colors"
              >
                {topic.name}
                <svg
                  width="11"
                  height="11"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2.5"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    d="M18 6L6 18M6 6l12 12"
                  />
                </svg>
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default SeaQaTopicList;