// components/users/UsersHeader.jsx
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPlus } from "@fortawesome/free-solid-svg-icons";

export default function UsersHeader({ onCreate }) {
  return (
    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight text-black/90">
          Kullanıcılar
        </h1>
        <p className="mt-1 text-sm text-black/55">
          Kullanıcı ekleyin, düzenleyin ve yetki (rol) yönetimini yapın.
        </p>
      </div>

      <button
        onClick={onCreate}
        className="inline-flex items-center justify-center gap-2 rounded-2xl px-4 py-3 text-sm font-semibold text-white bg-gradient-to-r from-[#e04a3b] to-[#ff6a5e] shadow-lg shadow-[#e04a3b]/15 hover:brightness-[1.02] active:scale-[0.99] transition"
      >
        <FontAwesomeIcon icon={faPlus} />
        Yeni Kullanıcı
      </button>
    </div>
  );
}
