"use client"

import { useState, useTransition } from "react"
import { PencilIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
import { createVariant } from "../../actions/variants"

export function CreateVariantButton({ templateKey }: { templateKey: string }) {
    const [pending, startTransition] = useTransition()
    const [error, setError] = useState<string | null>(null)

    return (
        <>
            <Button
                size="sm"
                disabled={pending}
                onClick={() =>
                    startTransition(async () => {
                        const result = await createVariant(templateKey)
                        if (result?.error) setError(result.error)
                    })
                }
            >
                <PencilIcon /> {pending ? "Wird angelegt …" : "Anpassen"}
            </Button>
            {error && <p className="w-full text-xs text-destructive">{error}</p>}
        </>
    )
}