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

export default function ServicesWafCard({ reportData }: { reportData: SecuritySummaryReportResultType }) {
    return (
        <Card>
            <CardHeader>
                <CardTitle className="flex items-center gap-2">
                    <BrickWall className="w-5 h-5"/>
                    WAF
                </CardTitle>
            </CardHeader>
            <CardContent>
                <div
                    className="text-3xl font-bold">{reportData.waf.count}</div>
                <div className="text-xs text-muted-foreground mt-1">
                    <div><span className="font-bold">WAF assets:</span></div>
                    <div className="flex flex-col gap-2 mt-3">
                        {reportData.waf.assets.map((waf_asset,index) => (
                            <code key={index}>{waf_asset}</code>
                        ))}
                    </div>

                </div>
            </CardContent>
        </Card>
    )
}