import styles from "./styles.module.scss"
import { useSelector } from "react-redux"
import { selectors } from "@/store"
import EmailInput from "@/components/pages/ABDesign/v1/pages/EmailEnterPage/EmailInput"
import NameInput from "@/components/pages/ABDesign/v1/pages/EmailEnterPage/NameInput"
import { useTranslations } from "@/hooks/translations"
import { ELocalesPlacement } from "@/locales"

function ProfileInformation() {
    const { translate } = useTranslations(ELocalesPlacement.Profile);
    const email = useSelector(selectors.selectEmail) || ""
    const name = useSelector(selectors.selectUser)?.username || ""

    return (
        <div className={styles.container}>
            <EmailInput
                name="email"
                value={email}
                placeholder={translate("/profile.profile_information.email_placeholder")}
                inputContainerClassName={styles.inputContainer}
                inputClassName={styles.input}
                onValid={() => { }}
                onInvalid={() => { }}
                readonly
            />
            <NameInput
                value={name}
                placeholder={translate("/profile.profile_information.name_placeholder")}
                inputContainerClassName={styles.inputContainer}
                inputClassName={styles.input}
                onValid={() => { }}
                onInvalid={() => { }}
                readonly
            />
        </div>
    )
}

export default ProfileInformation