"use client";

import { useState } from "react";
import { useTranslation } from "react-i18next";
import { TUser } from "@formbricks/types/user";
import { DeleteAccountModal } from "@/modules/account/components/DeleteAccountModal";
import { Alert, AlertDescription, AlertTitle } from "@/modules/ui/components/alert";
import { Button } from "@/modules/ui/components/button";

interface RemovedFromOrganizationProps {
  isFormbricksCloud: boolean;
  isSsoIdentityConfirmationDisabled: boolean;
  requiresPasswordConfirmation: boolean;
  user: TUser;
}

export const RemovedFromOrganization = ({
  user,
  isFormbricksCloud,
  isSsoIdentityConfirmationDisabled,
  requiresPasswordConfirmation,
}: Readonly<RemovedFromOrganizationProps>) => {
  const { t } = useTranslation();
  const [isModalOpen, setIsModalOpen] = useState(false);
  return (
    <div className="space-y-4">
      <Alert variant="warning">
        <AlertTitle>{t("setup.organization.create.no_membership_found")}</AlertTitle>
        <AlertDescription>{t("setup.organization.create.no_membership_found_description")}</AlertDescription>
      </Alert>
      <hr className="my-4 border-slate-200" />
      <p className="text-sm">{t("setup.organization.create.delete_account_description")}</p>
      <DeleteAccountModal
        requiresPasswordConfirmation={requiresPasswordConfirmation}
        open={isModalOpen}
        setOpen={setIsModalOpen}
        user={user}
        isFormbricksCloud={isFormbricksCloud}
        organizationsWithSingleOwner={[]}
        isSsoIdentityConfirmationDisabled={isSsoIdentityConfirmationDisabled}
      />
      <Button
        onClick={() => {
          setIsModalOpen(true);
        }}>
        {t("setup.organization.create.delete_account")}
      </Button>
    </div>
  );
};
