since3-portal/modules/shared/ui/components/stammdaten-panel.tsx

"use client"

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Pen } from "lucide-react";
import StammdatenForm from "@/modules/loginPage/ui/components/stamdaten-form";

type Client = React.ComponentProps<typeof StammdatenForm>["client"];
type PaymentDetails = React.ComponentProps<typeof StammdatenForm>["paymentDetails"];

export function StammdatenPanel({
    profileId,
    client,
    paymentDetails,
}: {
    profileId: string;
    client: Client;
    paymentDetails: PaymentDetails;
}) {
    const [isEditing, setIsEditing] = useState(false);
    const [resetCount, setResetCount] = useState(0);

    function handleDone() {
        setIsEditing(false);
        setResetCount((count) => count + 1);
    }

    return (
        <div className="flex flex-col gap-8 w-full">
            <div className="w-full flex flex-row justify-between items-center">
                <h1 className="text-3xl font-semibold">Stammdaten</h1>
                {!isEditing && (
                    <Button variant="outline" onClick={() => setIsEditing(true)}>
                        <Pen className="w-4 h-4 mr-2" /> Edit
                    </Button>
                )}
            </div>
            <StammdatenForm
                key={`${resetCount}-${JSON.stringify({ client, paymentDetails })}`}
                profileId={profileId}
                client={client}
                paymentDetails={paymentDetails}
                isEditing={isEditing}
                onDone={handleDone}
            />
        </div>
    );
}