"use client";

import { useState, useMemo } from "react";
import { InputSearch } from "@ramses1er/cbk-toolkit/client";

const users = [
  { id: 1, fullname: "Alice Martin" },
  { id: 2, fullname: "Bernard Dupont" },
];

export default function UsersPage() {
  const [query, setQuery] = useState("");

  const filtered = useMemo(() => {
    if (!query) return users;
    return users.filter((u) =>
      u.fullname.toLowerCase().includes(query.toLowerCase())
    );
  }, [query]);

  return (
    <div className="space-y-4">
      <InputSearch
        value={query}
        onChange={setQuery}
        placeholder="Rechercher un utilisateur..."
      />
      {filtered.map((u) => (
        <div key={u.id}>{u.fullname}</div>
      ))}
    </div>
  );
}