"use client"

import { useContext } from "react"

import { authLocalization } from "../../lib/auth-localization"
import { AuthUIContext } from "../../lib/auth-ui-provider"
import type { SettingsCardClassNames } from "./shared/settings-card"
import { UpdateFieldCard } from "./shared/update-field-card"

export interface UpdateUsernameCardProps {
    className?: string
    classNames?: SettingsCardClassNames
    isPending?: boolean
}

export function UpdateUsernameCard({
    className,
    classNames,
    isPending,
}: UpdateUsernameCardProps) {
    const {
        hooks: { useSession },
    } = useContext(AuthUIContext)

    const localization = {...authLocalization}

    const { data: sessionData } = useSession()
    const value = sessionData?.user.username

    return (
        <UpdateFieldCard
            className={className}
            classNames={classNames}
            value={value}
            description={localization.usernameDescription}
            name="username"
            instructions={localization.usernameInstructions}
            isPending={isPending}
            label={localization.username}
            placeholder={localization.usernamePlaceholder}
            required
        />
    )
}