'use client';
import { QuizAnswer } from '@/types/types';
import { toggleCorrect } from '../actions';
import { FaCheck, FaTimes } from 'react-icons/fa';

type RegularAnswerFormProps = {
  answer: QuizAnswer;
};

export function RegularAnswerForm({ answer }: RegularAnswerFormProps) {
  let btnColorClass = 'bg-white hover:bg-gray-50 border border-gray-200';
  let statusIcon = null;
  
  if (answer.correct) {
    btnColorClass = 'bg-cyan-50 text-cyan-800 hover:bg-cyan-100 border border-cyan-200';
    statusIcon = <FaCheck className="text-cyan-500 shrink-0" />;
  } else if (answer.correct === false) {
    btnColorClass = 'bg-red-50 text-red-800 hover:bg-red-100 border border-red-200';
    statusIcon = <FaTimes className="text-red-500 shrink-0" />;
  }

  return (
    <form>
      <input type="hidden" name="answerId" value={answer.id} />
      <input type="hidden" name="newCorrectValue" value={String(!answer.correct)} />
      <button
        type="button"
        onClick={() => {
          const formData = new FormData();
          formData.append('answerId', answer.id.toString());
          formData.append('newCorrectValue', String(!answer.correct));
          toggleCorrect(formData);
        }}
        className={`${btnColorClass} w-full px-3 py-2 text-sm rounded-md transition-colors flex items-center gap-2 justify-between`}
        title="Кликнете, за да промените верността"
      >
        <span className="text-left">{answer.answer}</span>
        {statusIcon}
      </button>
    </form>
  );
}