import { useState } from "react";
const questions = [
{
text: "How many hours of sports do you practice per week?",
options: [
{ id: 1, text: "Below 1 hour per week" },
{ id: 2, text: "1-3 hours per week" },
{ id: 3, text: "Above 4 hours per week" },
],
},
{
text: "What is your weight?",
options: [
{ id: 1, text: "Below 70kg" },
{ id: 2, text: "Above 80kg" },
],
},
{
text: "How do you plan to use your shoes?",
options: [
{ id: 1, text: "Comfort pace" },
{ id: 2, text: "Fast pace" },
],
},
{
text: "Do you have severe overpronation?",
options: [
{ id: 1, text: "Yes" },
{ id: 2, text: "No" },
],
},
];
const explanations = {
"1": "Your stability muscles and ligaments are not yet developed. Focus on shoes with average or increased stability.",
"2": "Your stability muscles are developed enough for shoes with average or slightly increased stability.",
"3": "Your muscles and ligaments can handle any shoes, so we can focus on faster models.",
"1-1": "Your weight is relatively low, so we recommend lighter shoes.",
"1-2": "You are above average weight, so we suggest choosing shoes with increased cushioning.",
"2-1": "We prioritize shoes that offer maximum comfort and safety.",
"2-2": "We prioritize shoes that enhance your running speed.",
"3-1": "Severe overpronation increases instability, avoid unstable shoes.",
"3-2": "No overpronation issues, no specific limitations.",
};
export default function RunningShoeSelector() {
const [answers, setAnswers] = useState({});
const handleSelect = (qIndex, optionId) => {
setAnswers((prev) => ({ ...prev, [qIndex]: optionId }));
};
return (
Running Shoe Selector
{questions.map((q, qIndex) => (
{q.text}
{q.options.map((opt) => (
))}
))}
Explanation:
{Object.values(answers).length === 4
? explanations[`${answers[0]}-${answers[1]}`] || "No specific recommendation."
: "Select options to see recommendations."}