'use client'

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

interface ToggleItemButtonProps {
  itemId: string
  completed: boolean
  variant?: 'full' | 'icon'
}

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

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

  if (variant === 'icon') {
    return (
      <button
        onClick={handleToggle}
        disabled={isToggling}
        className="hover:scale-110 transition-transform disabled:opacity-50"
        aria-label={completed ? 'Mark incomplete' : 'Mark complete'}
      >
        {completed ? (
          <CheckCircle2 size={20} className="text-green-500" />
        ) : (
          <Circle size={20} className="text-gray-400 hover:text-gray-600" />
        )}
      </button>
    )
  }

  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>
  )
}