import Image from "next/image";
import { requireSession } from "@/lib/session";
import { apiFetch } from "@/lib/api";
import { TenantPicker } from "./picker";

interface TenantOption {
  tenantId: string;
  code: string;
  name: string;
  status: string;
}

export default async function SelectTenantPage() {
  const session = await requireSession();
  const tenants = await apiFetch<TenantOption[]>("/auth/tenants", session.accessToken);

  return (
    <div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-12">
      <div className="w-full max-w-sm">
        <Image src="/branding/b2blogo.png" alt="B2BCall" width={140} height={34} priority className="mx-auto mb-8" />
        <h1 className="text-center text-lg font-semibold text-foreground">Qual conta você quer acessar?</h1>
        <p className="mt-1 text-center text-sm text-muted-foreground">Sua conta tem acesso a mais de um tenant.</p>
        <div className="mt-6">
          <TenantPicker tenants={tenants} />
        </div>
      </div>
    </div>
  );
}