import { getCredentials } from "@/modules/shared/queries/credentials"
import { getClientId } from "@/modules/shared/queries/profile"
import { CredentialsTable } from "@/modules/shared/ui/components/credentials-table"
import { CredentialDialog } from "@/modules/shared/ui/components/credential-dialog"

export async function CredentialsPanel({
    profileId,
    isAdmin,
}: {
    profileId: string
    isAdmin: boolean
}) {
    const clientId = await getClientId(profileId)
    const credentials = clientId ? await getCredentials(clientId) : []

    return (
        <div className="flex w-full flex-col gap-6 md:gap-8">
            <div className="flex w-full flex-wrap items-center justify-between gap-3">
                <h1 className="text-2xl font-semibold md:text-3xl">Passwörter</h1>
                <CredentialDialog profileId={profileId} />
            </div>
            <CredentialsTable profileId={profileId} credentials={credentials} isAdmin={isAdmin} />
        </div>
    )
}