"use client"

import type { ReactNode } from "react"
import { Plus, Search } from "lucide-react"

type FilterVisibility = "all" | "visible" | "hidden"

interface CategoryToolbarProps {
  searchQuery: string
  filterVisibility: FilterVisibility
  onSearchChange: (value: string) => void
  onFilterChange: (value: FilterVisibility) => void
  onCreateClick: () => void
  viewControls?: ReactNode
}

export function CategoryToolbar({
  searchQuery,
  filterVisibility,
  onSearchChange,
  onFilterChange,
  onCreateClick,
  viewControls,
}: CategoryToolbarProps) {
  return (
    <div className="flex flex-col w-full gap-0 border-b border-border">
      <div className="flex flex-wrap items-center gap-3 px-5 py-4 w-full">
      {/* Search */}
      <div className="flex items-center gap-2 flex-1 min-w-[180px] px-3.5 py-2.5 rounded-xl bg-muted border border-border">
        <Search
          className="w-3.5 h-3.5 text-muted-foreground shrink-0"
          aria-hidden="true"
        />
        <input
          type="text"
          value={searchQuery}
          onChange={(e) => onSearchChange(e.target.value)}
          placeholder="Search categories..."
          className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground font-sans outline-none"
          aria-label="Search categories"
        />
      </div>

      {/* Visibility filter */}
      <div className="flex items-center gap-1 rounded-xl p-1 bg-muted border border-border">
        {(["all", "visible", "hidden"] as const).map((v) => (
          <button
            key={v}
            onClick={() => onFilterChange(v)}
            className="px-3 py-1.5 cursor-pointer rounded-lg text-xs font-semibold font-sans transition-all"
            style={
              filterVisibility === v
                ? {
                    background:
                      v === "hidden"
                        ? "#F59E0B"
                        : v === "visible"
                        ? "var(--brand-green)"
                        : "var(--brand-navy)",
                    color: "white",
                  }
                : { color: "var(--muted-foreground)" }
            }
          >
            {v === "all" ? "All" : v === "visible" ? "Visible" : "Hidden"}
          </button>
        ))}
      </div>

      {/* Create button */}
      <button
        onClick={onCreateClick}
        className="flex cursor-pointer items-center gap-2 px-4 py-2.5 rounded-xl text-white text-sm font-semibold font-sans transition-all duration-150 hover:brightness-105 active:scale-[0.98] shrink-0"
        style={{
          background: "var(--brand-green)",
          boxShadow: "0 2px 8px rgba(43,182,115,0.3)",
        }}
      >
        <Plus className="w-4 h-4" aria-hidden="true" />
        New Category
      </button>
      </div>
      {viewControls ? <div className="px-5 pb-4">{viewControls}</div> : null}
    </div>
  )
}