'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { Button } from '@/components/ui/button'
import { ProductDialog } from '@/components/dialogs/product-dialog'
import { debugProps } from '@/lib/debug'

export function NewProductButton() {
  const [open, setOpen] = useState(false)
  const router = useRouter()

  return (
    <>
      <div {...debugProps('new-product-button', 'NewProductButton', 'components/dashboard/new-product-button.tsx')}>
        <Button onClick={() => setOpen(true)} data-debug-id="new-product-button__trigger">+ Nieuw product</Button>
      </div>
      <ProductDialog
        mode="create"
        open={open}
        onOpenChange={setOpen}
        onSaved={(id) => router.push(`/products/${id}`)}
      />
    </>
  )
}
