"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 w-full flex-col gap-6 md:gap-8">
            <div className="flex w-full flex-wrap items-center justify-between gap-3">
                <h1 className="text-2xl font-semibold md:text-3xl">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>
    );
}