import { Card, CardContent, CardDescription, CardHeader, CardTitle } from “@/components/ui/card”;
import { Button } from “@/components/ui/button”;
import { PercentileResult } from “./SurveyForm”;
import { TrendingUp, Users, BarChart3 } from “lucide-react”;
import { Progress } from “@/components/ui/progress”;
interface PercentileDisplayProps {
result: PercentileResult;
onReset: () => void;
}
export const PercentileDisplay = ({ result, onReset }: PercentileDisplayProps) => {
const getPercentageMessage = (percentage: number) => {
if (percentage >= 90) return “Outstanding! You scored better than 90% of your age group”;
if (percentage >= 75) return “Excellent! You scored better than 75% of your age group”;
if (percentage >= 50) return “Good! You scored better than half of your age group”;
if (percentage >= 25) return “You scored better than 25% of your age group”;
return “Most people in your age group scored higher”;
};
return (
Your Results
Based on {result.totalResponses} response{result.totalResponses !== 1 ? ‘s’ : ”} from people aged {result.age}
{/* Main Percentage Display */}
{result.percentile}%
You scored better than {result.percentile}% of people
