import {SecuritySummaryReportResultType} from "@/types/security-summary";
import {Card, CardContent, CardHeader, CardTitle} from "@/Components/ui/card";
import {Check, Copy, ShieldAlert} from "lucide-react";
import {Button} from "@/Components/ui/button";
import React from "react";
import {useClipboard} from "use-clipboard-copy";

export default function DashboardHeader({ reportData }: { reportData: SecuritySummaryReportResultType }) {

    const [isCopied, setIsCopied] = React.useState(false);
    const clipboard = useClipboard();


    const handleCopy = () => {
        clipboard.copy(reportData.idsummary)
        setIsCopied(true)
        setTimeout(() => setIsCopied(false), 2000)
    }

    return (
        <Card className="mb-6">
            <CardHeader>
                <div className="flex justify-between items-center">
                    <CardTitle className="text-2xl">Security report for: {reportData.domain_name}</CardTitle>
                    <div className="flex items-center gap-2">
                        <ShieldAlert
                            className={`w-6 h-6 ${parseInt(reportData.risk_score) > 75 ? 'text-red-500' : 'text-yellow-500'}`}/>
                        <span className="text-xl font-bold">Risk Score: {reportData.risk_score}/100</span>
                    </div>
                </div>
                <div className="flex sm:flex-row flex-col sm:items-center gap-2 text-gray-500">
                    <span className="flex flex-row gap-1">
                        <span className="font-bold mr-2">Scan ID:</span>
                        <pre className="px-2 bg-muted rounded-md">
                            <code className="text-sm whitespace-nowrap">{reportData.idsummary}</code>
                        </pre>
                        <Button
                            variant="outline"
                            size="sm"
                            className="h-8 w-8 p-0"
                            onClick={handleCopy}
                            aria-label={isCopied ? "Copied" : "Copy to clipboard"}
                        >
                            {isCopied ? (
                                <Check className="w-4 h-4 text-green-500"/>
                            ) : (
                                <Copy className="w-4 h-4"/>
                            )}
                        </Button>
                    </span>
                </div>
                <div className="flex sm:flex-row flex-col sm:items-center gap-2 text-gray-500">
                    <span>
                        <span className="font-bold mr-2">Scan Date:</span>
                        <span>{reportData.creation_date}</span>
                    </span>
                    <span>
                        <span className="font-bold mr-2">Last Edit:</span>
                        <span>{reportData.last_edit}</span>
                    </span>
                </div>
            </CardHeader>
        </Card>
    )
}