"use client";

import { Search, X } from "lucide-react";
import { cn } from "@/lib/utils";

interface SearchBarProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  className?: string;
  ariaLabel?: string;
}

export function SearchBar({
  value,
  onChange,
  placeholder = "Search…",
  className,
  ariaLabel = "Search",
}: SearchBarProps) {
  return (
    <div
      className={cn(
        "group relative flex items-center rounded-full border border-slate-200 bg-white shadow-soft transition-all duration-200 ease-snappy focus-within:border-brand-400 focus-within:shadow-glow-sm hover:border-slate-300 dark:border-slate-800 dark:bg-slate-900/70 dark:focus-within:border-brand-400/60 dark:hover:border-slate-700",
        className,
      )}
    >
      <Search
        className="pointer-events-none absolute start-4 h-4 w-4 text-slate-400 transition-colors duration-200 group-focus-within:text-brand-500"
        aria-hidden
      />
      <input
        type="search"
        role="searchbox"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        aria-label={ariaLabel}
        className="block w-full rounded-full bg-transparent py-3 ps-11 pe-11 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none dark:text-white dark:placeholder:text-slate-500"
      />
      {value && (
        <button
          type="button"
          onClick={() => onChange("")}
          aria-label="Clear search"
          className="absolute end-3 flex h-7 w-7 items-center justify-center rounded-full text-slate-400 transition-all duration-200 hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-slate-800 dark:hover:text-white"
        >
          <X className="h-3.5 w-3.5" />
        </button>
      )}
    </div>
  );
}