'use client'

import { useState, useTransition } from 'react'
import { Button } from '@/components/ui/button'
import { leaveProductAction } from '@/actions/products'

interface LeaveProductButtonProps {
  productId: string
}

export function LeaveProductButton({ productId }: LeaveProductButtonProps) {
  const [confirming, setConfirming] = useState(false)
  const [isPending, startTransition] = useTransition()

  function handleLeave() {
    startTransition(async () => {
      await leaveProductAction(productId)
    })
  }

  if (confirming) {
    return (
      <div className="flex gap-2 shrink-0">
        <Button variant="destructive" size="sm" disabled={isPending} onClick={handleLeave}>
          {isPending ? 'Bezig…' : 'Ja, verlaten'}
        </Button>
        <Button variant="ghost" size="sm" onClick={() => setConfirming(false)} disabled={isPending}>
          Annuleren
        </Button>
      </div>
    )
  }

  return (
    <Button
      variant="outline"
      size="sm"
      className="shrink-0 border-error/40 text-error hover:bg-error/10"
      onClick={() => setConfirming(true)}
    >
      Verlaten
    </Button>
  )
}