/* eslint-disable @typescript-eslint/no-empty-function */
"use client";

import { use } from "react";
import { useTranslations } from "next-intl";

import { EmailInput, NameInput, Skeleton } from "@/components/ui";
import { IUser } from "@/entities/user/types";

import styles from "./ProfileInformation.module.scss";

interface IProfileInformationProps {
  user: Promise<IUser>;
}

export default function ProfileInformation({ user }: IProfileInformationProps) {
  const userData = use(user);

  const t = useTranslations("Profile");
  const email = userData?.email || "";
  const name = userData?.profile?.name || "";

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

export function ProfileInformationSkeleton() {
  return (
    <div className={styles.container}>
      <Skeleton style={{ height: "136px" }} />
    </div>
  );
}
