import { useState } from "react"
import { Button } from "@/components/ui/button"
import { CheckCircle2, Circle } from "lucide-react"
import { cn } from "@/lib/utils"

interface AttendanceButtonProps {
    initialAttended?: boolean
    onToggle?: (attended: boolean) => void
}

export function AttendanceButton({ initialAttended = false, onToggle }: AttendanceButtonProps) {
    const [attended, setAttended] = useState(initialAttended)

    const handleClick = () => {
        const newState = !attended
        setAttended(newState)
        onToggle?.(newState)
    }

    return (
        <Button
            variant={attended ? "default" : "outline"}
            className={cn(
                "gap-2 transition-all",
                attended ? "bg-green-600 hover:bg-green-700" : ""
            )}
            onClick={handleClick}
        >
            {attended ? (
                <>
                    <CheckCircle2 className="h-4 w-4" />
                    I Was There
                </>
            ) : (
                <>
                    <Circle className="h-4 w-4" />
                    I Was There
                </>
            )}
        </Button>
    )
}