import { useTranslation } from "react-i18next";

import Modal from "@components/modals/Modal";
import ContentSurface from "@components/surface/ContentSurface";
import LightSurface from "@components/surface/LightSurface";

type Props = {
  open: boolean;
  onClose: () => void;
};

const USER_DATA_MOCK = {
  id: 123456789,
  registrationDate: "2023-01-01",
  paymentBalance: 1000,
  withdrawalBalance: 500,
};

export default function AccountModal({ open, onClose }: Props) {
  const { t } = useTranslation();

  return (
    <Modal className="w-full max-w-67.5" open={open} onClose={onClose}>
      <ContentSurface className="w-full rounded-full">
        <LightSurface className="w-full rounded-full p-2.5 font-bold text-lg">
          {t("accountInfo.yourId")} - {USER_DATA_MOCK.id}
        </LightSurface>
      </ContentSurface>
      <ContentSurface className="w-full rounded-full">
        <LightSurface className="w-full rounded-full p-2.5 font-bold text-lg">
          {t("accountInfo.registrationDate")} - {USER_DATA_MOCK.registrationDate}
        </LightSurface>
      </ContentSurface>
      <ContentSurface className="w-full rounded-full">
        <LightSurface className="w-full rounded-full p-2.5 font-bold text-lg">
          {t("accountInfo.paymentBalance")} - {USER_DATA_MOCK.paymentBalance}
        </LightSurface>
      </ContentSurface>
      <ContentSurface className="w-full rounded-full">
        <LightSurface className="w-full rounded-full p-2.5 font-bold text-lg">
          {t("accountInfo.withdrawalBalance")} - {USER_DATA_MOCK.withdrawalBalance}
        </LightSurface>
      </ContentSurface>
    </Modal>
  );
}
