"use client";

import React, { useState, useRef } from "react";
import { Search, ChevronLeft, ChevronRight } from "lucide-react";

export const BLOG_CATEGORIES = [
  { id: "all", label: "All Categories" },
  { id: "192", label: "Assignment Services" },
  { id: "193", label: "Case Study" },
  { id: "194", label: "Dissertation Help" },
  { id: "301", label: "Essay Writing" },
  { id: "302", label: "Homework Help" },
  { id: "303", label: "Paper Help" },
  { id: "304", label: "Programming" },
  { id: "305", label: "Research Paper" },
  { id: "306", label: "Thesis Help" },
  { id: "307", label: "CourseWork Help" },
  { id: "309", label: "Others" },
  { id: "310", label: "Assessment Answers" },
];

export const BlogBannerSearch: React.FC<{
  onSearch: (query: string) => void;
}> = ({ onSearch }) => {
  const [searchQuery, setSearchQuery] = useState("");

  const handleSearchSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (searchQuery.trim()) {
      onSearch(searchQuery.trim());
    }
  };

  return (
    <div className="max-w-xl mx-auto px-4">
      <form onSubmit={handleSearchSubmit} className="flex items-center rounded overflow-hidden shadow-sm">
        <input
          type="text"
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          placeholder="Search for Blog..."
          className="w-full bg-white px-4 py-2.5 text-sm text-slate-800 placeholder-slate-400 focus:outline-none"
        />
        <button
          type="submit"
          aria-label="Search blog"
          className="bg-[#f58e0e] hover:bg-[#e07f0d] text-white px-5 py-2.5 flex items-center justify-center transition-colors shrink-0"
        >
          <Search className="w-5 h-5 stroke-[2.5]" />
        </button>
      </form>
    </div>
  );
};

export const BlogCategoryTabs: React.FC<{
  activeCategory: string;
  onSelectCategory: (catId: string) => void;
}> = ({ activeCategory, onSelectCategory }) => {
  const scrollContainerRef = useRef<HTMLDivElement>(null);

  const scrollTabs = (direction: "left" | "right") => {
    if (scrollContainerRef.current) {
      const scrollAmount = direction === "left" ? -250 : 250;
      scrollContainerRef.current.scrollBy({ left: scrollAmount, behavior: "smooth" });
    }
  };

  return (
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center gap-2">
        {/* Scroll Left */}
        <button
          type="button"
          onClick={() => scrollTabs("left")}
          aria-label="Scroll left"
          className="p-2 text-black-400 hover:text-red-600 transition-colors shrink-0"
        >
          <ChevronLeft className="w-6 h-6" />
        </button>

        {/* Scrollable Tabs without scrollbar */}
        <div
          ref={scrollContainerRef}
          className="flex-1 flex items-center gap-2.5 overflow-x-auto py-1 scroll-smooth"
          style={{
            scrollbarWidth: "none",
            msOverflowStyle: "none",
          }}
        >
          {BLOG_CATEGORIES.map((cat) => {
            const isActive = activeCategory === cat.id;
            return (
              <button
                key={cat.id}
                onClick={() => onSelectCategory(cat.id)}
                className={`shrink-0 rounded-full px-6 py-2.5 text-xs font-medium transition-all border ${
                  isActive
                    ? "bg-[#595959] text-white border-[#595959]"
                    : "bg-white text-[#555] border-slate-300 hover:bg-slate-300 hover:text-slate-900"
                }`}
              >
                {cat.label}
              </button>
            );
          })}
        </div>

        {/* Scroll Right */}
        <button
          type="button"
          onClick={() => scrollTabs("right")}
          aria-label="Scroll right"
          className="p-2 text-black-400 hover:text-red-600 transition-colors shrink-0"
        >
          <ChevronRight className="w-6 h-6" />
        </button>
      </div>
  );
};