import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";

type ScoreCardProps = {
  score: number;
};

export function ScoreCard({ score }: ScoreCardProps) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <div>
          <p className="text-sm font-semibold text-[#5f6b84]">Puntaje Global</p>
          <h2 className="text-3xl font-bold text-[#1f2b44]">{score}%</h2>
        </div>
        <Badge variant={score >= 70 ? "success" : score >= 50 ? "warning" : "neutral"}>
          {score >= 70 ? "Rendimiento alto" : score >= 50 ? "Rendimiento medio" : "Rendimiento inicial"}
        </Badge>
      </CardHeader>
      <CardContent>
        <Progress value={score} showValue />
      </CardContent>
    </Card>
  );
}
