"use client";
import React, { ReactNode } from "react";
import classNames from "classnames";
import style from "./QuestionCard.module.css";
import Button from "@components/Button/Button";

interface QuestionCardProps {
    title: string;
    description?: string;
    children: ReactNode;
    onNext?: () => void;
    nextLabel?: string;
    disableNext?: boolean;
    isActive: boolean;
    topAccessory?: ReactNode;
    step?: number;
    totalSteps?: number;
}

export default function QuestionCard({
    title,
    description,
    children,
    onNext,
    nextLabel = "Siguiente",
    disableNext = false,
    isActive,
    topAccessory
}: QuestionCardProps) {
    
    if (!isActive) return null;

    return (
        <div className={classNames(style.cardContainer, style.animateEnter)}>
            <div className={style.contentWrapper}>
                {topAccessory && <div className={style.topAccessory}>{topAccessory}</div>}
                <h1 className={style.title}>{title}</h1>
                {description && <p className={style.description}>{description}</p>}
                
                <div className={style.inputArea}>
                    {children}
                </div>

                {onNext && (
                    <div className={style.actionArea}>
                        <button 
                            className={style.nextButton}
                            onClick={onNext}
                            disabled={disableNext}
                        >
                            {nextLabel}
                        </button>
                        <span className={style.pressEnterText}>presiona <strong>Enter ↵</strong></span>
                    </div>
                )}
            </div>
        </div>
    );
}
