"use client";

import { useState, useEffect } from "react";
import { motion } from "framer-motion";

interface ChallengeButtonProps {
  coins: number;
  costToChallenge: number;
  onChallenge: () => void;
  disabled?: boolean;
}

export function ChallengeButton({
  coins,
  costToChallenge,
  onChallenge,
  disabled,
}: ChallengeButtonProps) {
  const [secondsLeft, setSecondsLeft] = useState(30);

  useEffect(() => {
    if (secondsLeft <= 0) return;
    const timer = setTimeout(() => setSecondsLeft((s) => s - 1), 1000);
    return () => clearTimeout(timer);
  }, [secondsLeft]);

  const visible = secondsLeft > 0;
  if (!visible) return null;

  const canAfford = coins >= costToChallenge;

  return (
    <motion.button
      initial={{ opacity: 0, scale: 0.9 }}
      animate={{ opacity: 1, scale: 1 }}
      onClick={onChallenge}
      disabled={disabled || !canAfford}
      className="relative px-6 py-3 border border-red-700/50 bg-red-950/20 text-red-400 rounded-lg hover:bg-red-950/40 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
    >
      <span className="font-bold">Challenge Verdict</span>
      <span className="text-red-600 text-xs ml-2">({costToChallenge} coins)</span>
      <div className="absolute -top-2 -right-2 bg-red-900 text-red-200 text-[10px] px-1.5 py-0.5 rounded-full">
        {secondsLeft}s
      </div>
    </motion.button>
  );
}