import {SecuritySummaryReportResultType} from "@/types/security-summary";
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/Components/ui/card";
import {ShieldAlert} from "lucide-react";
import {Progress} from "@/Components/ui/progress";
import React from "react";

export default function OverviewVulnerabilityScoreCard({ reportData }: { reportData: SecuritySummaryReportResultType }) {
    return (
        <Card>
            <CardHeader>
                <CardTitle className="flex items-center gap-2">
                    <ShieldAlert className="w-5 h-5"/>
                    Vulnerability Score
                </CardTitle>
                <CardDescription>Active and passive vulnerability scores</CardDescription>
            </CardHeader>
            <CardContent>
                <div className="space-y-2">
                    <div>
                        <div className="text-xs text-muted-foreground">Active Score</div>
                        <Progress value={reportData.vulnerability_score_active} className="mt-1"/>
                        <div className="text-sm font-medium">{reportData.vulnerability_score_active}%
                        </div>
                    </div>
                    <div>
                        <div className="text-xs text-muted-foreground">Passive Score</div>
                        <Progress value={reportData.vulnerability_score_passive} className="mt-1"/>
                        <div className="text-sm font-medium">{reportData.vulnerability_score_passive}%
                        </div>
                    </div>
                </div>
            </CardContent>
        </Card>
    )
}