interface SearchInputProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
}

export function SearchInput({ value, onChange, placeholder = "Search..." }: SearchInputProps) {
  return (
    <input
      type="text"
      value={value}
      onInput={(e) => onChange((e.target as HTMLInputElement).value)}
      placeholder={placeholder}
      class="w-full rounded-[var(--z-radius-input)] px-3 py-2 text-sm outline-none transition-all"
      style={{
        background: "var(--z-card-bg)",
        border: "1px solid var(--z-border)",
        color: "var(--z-text)",
      }}
      onFocus={(e) => { (e.target as HTMLInputElement).style.borderColor = "var(--z-accent-border)"; }}
      onBlur={(e) => { (e.target as HTMLInputElement).style.borderColor = "var(--z-border)"; }}
    />
  );
}
