RiskQuest UI Copy this Tailwind FinancialRiskQuestionnaireto Your Project

Build a modern, responsive React component using Next.js, Tailwind CSS, and shadcn/ui to display a financial risk assessment question for business users. The component should: Fetch data from the following API: pgsql Copy Edit GET localhost:3333/admin/risk assessment/questions?isActive=true&sortBy=order&sortDirection=ASC&page=1&limit=1 The API response looks like this: json Copy Edit { "success": true, "data": { "data": [ { "id": "question id", "text": "Nhà đầu tư có kinh nghiệm... / How many years does Investor have experience in securities investment for?", "order": 1, "isActive": true, "category": "ABILITY_TO_TAKE_RISK", "options": [ { "text": "Chưa có kinh nghiệm / Inexperienced", "value": 1 }, { "text": "Dưới 1 năm... / Less than 1 year...", "value": 2 } ] } ], "pagination": { "offset": 0, "totalItems": 10, "page": 1, "limit": 1 } }, "message": "Success", "statusCode": 200 } Design & Functionality Requirements: Use shadcn/ui components like Card, RadioGroup, Button, and Progress. Display the question clearly with support for bilingual format (Vietnamese / English in same string). Render the options using a stylish and user friendly radio group or clickable cards. Responsive layout with good spacing and mobile friendly touch targets. Include a "Next" button to load the next question using pagination (page, limit). Show a simple progress bar (e.g. “Question 1 of 10”) using the Progress component from shadcn/ui. (Optional) Handle answer selection state and send the selected value to the server (or keep in local state for now). Prioritize clean layout, good UX for business professionals, and quick responsiveness.