"use client";

import * as React from "react";
import { cn } from "../../utils/cn";
import { Search } from "lucide-react";

interface BlogCommandBarProps {
  searchQuery: string;
  onSearchChange: (value: string) => void;
  tags: string[];
  activeTags: string[];
  onTagToggle: (tag: string) => void;
  className?: string;
}

export const BlogCommandBar: React.FC<BlogCommandBarProps> = ({
  searchQuery,
  onSearchChange,
  tags,
  activeTags,
  onTagToggle,
  className = "",
}) => {
  return (
    <div
      className={cn(
        "w-full max-w-2xl mx-auto flex flex-col items-center space-y-4 md:space-y-6 px-0",
        className,
      )}
    >
      {/* Command Input Area */}
      <div className="relative group w-full px-0 sm:px-4 md:px-0">
        {/* Glow Effect */}
        <div className="absolute -inset-0.5 bg-gradient-to-r from-slate-200 to-slate-100 rounded-2xl blur opacity-20 group-hover:opacity-100 transition duration-500" />

        <div className="relative flex items-center bg-white rounded-2xl border border-slate-200 p-1.5 md:p-2 shadow-sm transition-all focus-within:ring-2 focus-within:ring-slate-100 focus-within:border-slate-300">
          <div className="pl-3 md:pl-4 text-slate-400">
            <Search className="w-4 h-4 md:w-5 md:h-5" />
          </div>
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => onSearchChange(e.target.value)}
            placeholder="Beiträge suchen..."
            className="w-full bg-transparent px-3 md:px-4 py-2 md:py-3 text-base md:text-lg text-slate-900 placeholder:text-slate-300 outline-none font-bold"
          />
          {searchQuery && (
            <button
              onClick={() => onSearchChange("")}
              className="mr-2 px-2.5 py-1 md:px-3 md:py-1.5 bg-slate-100 hover:bg-slate-200 rounded-lg text-[9px] md:text-[10px] font-bold uppercase tracking-wider text-slate-500 hover:text-slate-900 transition-colors"
            >
              Leeren
            </button>
          )}
        </div>
      </div>

      {/* Tag Command Row */}
      <div className="flex flex-wrap items-center justify-center gap-1.5 md:gap-2 px-4 md:px-0">
        {tags.map((tag) => {
          const isActive = activeTags.includes(tag);
          return (
            <button
              key={tag}
              onClick={() => onTagToggle(tag)}
              className={cn(
                "px-2.5 py-1 md:px-3 md:py-1.5 rounded-lg text-[9px] md:text-[10px] font-mono uppercase tracking-wider border transition-all duration-200 select-none",
                isActive
                  ? "bg-slate-900 text-white border-slate-900 shadow-md transform scale-105"
                  : "bg-white text-slate-500 border-slate-200 hover:border-slate-400 hover:text-slate-900 hover:bg-slate-50",
              )}
            >
              #{tag}
            </button>
          );
        })}
      </div>
    </div>
  );
};
