'use client'

import { useState } from 'react'
import { Button } from '@/components/ui/button'
import { DemoTooltip } from '@/components/shared/demo-tooltip'
import { ProductDialog, type ProductDialogProduct } from '@/components/dialogs/product-dialog'
import { debugProps } from '@/lib/debug'

interface Props {
  product: ProductDialogProduct
  isDemo?: boolean
  size?: 'sm' | 'default'
  variant?: 'outline' | 'ghost'
}

export function EditProductButton({ product, isDemo = false, size = 'sm', variant = 'outline' }: Props) {
  const [open, setOpen] = useState(false)

  return (
    <span {...debugProps('edit-product-button', 'EditProductButton', 'components/products/edit-product-button.tsx')}>
      <DemoTooltip show={isDemo}>
        <Button
          variant={variant}
          size={size}
          onClick={(e) => { e.stopPropagation(); if (!isDemo) setOpen(true) }}
          disabled={isDemo}
        >
          Bewerken
        </Button>
      </DemoTooltip>
      <ProductDialog
        mode="edit"
        open={open}
        onOpenChange={setOpen}
        product={product}
        isDemo={isDemo}
      />
    </span>
  )
}