"use client";

import { useTenant } from "@/contexts/TenantContext";

export function TenantSelector() {
  const { tenantId, setTenantId, role, setRole, availableRoles } = useTenant();

  return (
    <div className="flex flex-col gap-2 text-sm text-slate-200">
      <div className="flex items-center gap-2">
        <label className="font-semibold text-slate-200">Tenant ID:</label>
        <input
          value={tenantId}
          onChange={(e) => setTenantId(e.target.value)}
          placeholder="Enter tenant ID"
          className="rounded-xl border border-white/10 bg-slate-900/50 px-4 py-2 text-sm text-white outline-none focus:border-cyan-400 min-w-[150px]"
        />
      </div>
      <div className="flex items-center gap-2">
        <label className="font-semibold text-slate-200">Role:</label>
        <select
          value={role}
          onChange={(e) => setRole(e.target.value as typeof availableRoles[number])}
          className="rounded-xl border border-white/10 bg-slate-900/50 px-3 py-2 text-sm text-white outline-none focus:border-cyan-400"
        >
          {availableRoles.map((roleOption) => (
            <option key={roleOption} value={roleOption} className="bg-slate-900 text-white">
              {roleOption.charAt(0).toUpperCase() + roleOption.slice(1)}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}