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

export default function OverviewEmailSecurityCard({ reportData }: { reportData: SecuritySummaryReportResultType }) {
    return (
        <Card>
            <CardHeader>
                <CardTitle className="flex items-center gap-2">
                    <LockIcon className="w-5 h-5"/>
                    Email Security
                </CardTitle>
                <CardDescription>Email security overview</CardDescription>
            </CardHeader>
            <CardContent>
                <div className="text-3xl font-bold">{reportData.email_security.spoofable}</div>
                <div className="flex flex-col gap-3 mt-1">
                                    <span><span
                                        className="font-bold">DMARC Policy:</span> {reportData.email_security.dmarc_policy}</span>
                </div>
                <div className="text-xs text-muted-foreground mt-1">
                    Black List Detections: <span
                    className="font-bold">{reportData.email_security.blacklist_detections}</span> and
                    Black Lists Total List: <span
                    className="font-bold">{reportData.email_security.blacklist_total_list}</span>
                </div>
            </CardContent>
        </Card>
    )
}