import { FC, useEffect, useState } from "react";
import "./ToolCard.scss";
import { useTrad } from "@/hooks/useTrad";
interface ToolCardProps {
    toolNumber: number;
    onClick: () => void;
}

interface ToolData {
    name: string;
    substepName: string;
}

export const ToolCard: FC<ToolCardProps> = ({ toolNumber, onClick }) => {
    const [toolData, setToolData] = useState<ToolData>();
    const { language } = useTrad();

    useEffect(() => {
        const getToolData = async () => {
            const [toolContent, substepContent] = await Promise.all([
                import(`@content/tools/tool_${toolNumber}.json`),
                import(`@content/substep_${toolNumber}.json`),
            ]);

            setToolData({
                name: toolContent[language].name || toolContent.fr.name,
                substepName:
                    substepContent[language].substep_name ||
                    substepContent.fr.substep_name,
            });
        };

        getToolData();
    }, [toolNumber, language]);

    return (
        <article className="tool-card" onClick={onClick} tabIndex={0}>
            <div className="tool-card__button">
                <h3 className="tool-card__title">{toolData?.name}</h3>
                <p className="tool-card__substep">{toolData?.substepName}</p>
            </div>
        </article>
    );
};