import { ReactNode } from "react";
import styles from "./styles.module.css";

type IconComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;

type TutorialFrameProps = {
    stepIndex: number;
    totalSteps?: number;
    title: string;
    hint: string;
    children?: ReactNode;
    controls?: ReactNode;
    badge?: ReactNode;
};

export function TutorialFrame({
    stepIndex,
    totalSteps = 4,
    title,
    hint,
    children,
    controls,
    badge,
}: TutorialFrameProps) {
    return (
        <div className={styles.guidedOverlay}>
            <div className={styles.softDim} />
            <section className={styles.guidePanel}>
                <div className={styles.stepPips} aria-hidden="true">
                    {Array.from({ length: totalSteps }).map((_, index) => (
                        <span
                            key={index}
                            className={`${styles.stepPip} ${index <= stepIndex ? styles.stepPipActive : ""}`}
                        />
                    ))}
                </div>
                <h2>{title}</h2>
                <p>{hint}</p>
                {controls ? <div className={styles.guideControls}>{controls}</div> : null}
            </section>
            {children ? <div className={styles.practiceDock}>{children}</div> : null}
            {badge ? <div className={styles.successDock}>{badge}</div> : null}
        </div>
    );
}

type FallbackTiltButtonProps = {
    onPress: () => void;
    disabled?: boolean;
    label: string;
};

export function FallbackTiltButton({ onPress, disabled = false, label }: FallbackTiltButtonProps) {
    return (
        <button className={styles.fallbackButton} type="button" onClick={onPress} disabled={disabled}>
            {label}
        </button>
    );
}

type CommandPairProps = {
    TriggerIcon: IconComponent;
    ActionIcon: IconComponent;
};

export function CommandPair({ TriggerIcon, ActionIcon }: CommandPairProps) {
    return (
        <div className={styles.commandPair} aria-hidden="true">
            <TriggerIcon className={styles.commandIcon} />
            <span className={styles.commandArrow}>→</span>
            <ActionIcon className={styles.commandIcon} />
        </div>
    );
}

type SuccessBadgeProps = {
    TickIcon: IconComponent;
};

export function SuccessBadge({ TickIcon }: SuccessBadgeProps) {
    return (
        <div className={styles.successBadge}>
            <TickIcon className={styles.successIcon} />
        </div>
    );
}
