'use client'

import { useState } from 'react'
import { toggleItem } from '@/lib/actions'
import { CheckCircle2, Circle } from 'lucide-react'

interface ToggleItemButtonProps {
  itemId: string
  completed: boolean
}

export default function ToggleItemButton({ itemId, completed }: ToggleItemButtonProps) {
  const [isToggling, setIsToggling] = useState(false)

  const handleToggle = async () => {
    setIsToggling(true)
    try {
      await toggleItem(itemId)
    } catch (error) {
      console.error('Error toggling item:', error)
    } finally {
      setIsToggling(false)
    }
  }

  return (
    <button
      onClick={handleToggle}
      disabled={isToggling}
      className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 disabled:bg-gray-50 text-gray-700 rounded-lg transition-colors"
    >
      {completed ? (
        <>
          <CheckCircle2 size={18} className="text-green-500" />
          <span>Mark Incomplete</span>
        </>
      ) : (
        <>
          <Circle size={18} />
          <span>Mark Complete</span>
        </>
      )}
    </button>
  )
}