"use client";

import * as React from "react";
import { SearchBar } from "../SearchBar";
import { cn } from "../../utils/cn";

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

export const BlogFilterBar: React.FC<BlogFilterBarProps> = ({
  searchQuery,
  onSearchChange,
  tags,
  activeTags,
  onTagToggle,
  className = "",
}) => {
  return (
    <div
      className={cn(
        "w-full max-w-full glass rounded-3xl border border-slate-200/50 p-2 md:p-3 flex flex-col md:flex-row gap-4 md:items-center shadow-lg shadow-slate-100/50 backdrop-blur-md relative overflow-hidden group",
        className,
      )}
    >
      {/* Decorative gradient bleed */}
      <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-indigo-500/5 to-transparent blur-2xl -z-10 pointer-events-none" />

      {/* Search Area */}
      <div className="w-full md:w-1/3 min-w-[280px]">
        <SearchBar value={searchQuery} onChange={onSearchChange} size="small" />
      </div>

      {/* Vertical Divider (Desktop) */}
      <div className="hidden md:block w-px h-8 bg-slate-100" />

      {/* Tags Scroll Area */}
      <div className="flex-1 min-w-0 overflow-x-auto no-scrollbar mask-gradient-right">
        <div className="flex items-center gap-2 pr-8">
          <span className="text-[10px] font-mono text-slate-300 uppercase tracking-widest shrink-0 mr-2">
            Filter:
          </span>
          {tags.map((tag) => {
            const isActive = activeTags.includes(tag);
            return (
              <button
                key={tag}
                onClick={() => onTagToggle(tag)}
                className={cn(
                  "px-3 py-1.5 rounded text-[9px] font-mono uppercase tracking-wider border transition-all duration-300 whitespace-nowrap",
                  isActive
                    ? "bg-slate-900 text-white border-slate-900 shadow-md"
                    : "bg-white/50 text-slate-500 border-slate-100 hover:border-slate-300 hover:text-slate-800",
                )}
              >
                #{tag}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
};
