Prompt Safety Check

"use client";

import React from "react";
import { ShieldAlert, ShieldCheck, Lock, EyeOff } from "lucide-react";

export default function PromptSafetyCheck() {
    const scans = [
        { label: "PII Detection", status: "secure", info: "No emails or phone numbers found" },
        { label: "Injection Risk", status: "secure", info: "System instruction boundary intact" },
        { label: "Bias & Toxicity", status: "warning", info: "Slant detected in paragraph 2" },
    ];

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-md mx-auto">
            <div className="flex items-center justify-between mb-8">
                <div className="flex items-center gap-2">
                    <Lock className="h-4 w-4 text-emerald-500" />
                    <h3 className="text-sm font-bold text-zinc-900 dark:text-zinc-100 uppercase tracking-widest">Privacy Shield</h3>
                </div>
                <span className="text-[10px] font-black text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-full">ACTIVE SCAN</span>
            </div>

            <div className="space-y-3">
                {scans.map((s) => (
                    <div key={s.label} className="p-4 rounded-xl border border-zinc-100 dark:border-zinc-800 bg-zinc-50/50 dark:bg-zinc-900/50">
                        <div className="flex items-center justify-between mb-1.5">
                            <div className="flex items-center gap-2">
                                {s.status === "secure" ? <ShieldCheck className="h-4 w-4 text-emerald-500" /> : <ShieldAlert className="h-4 w-4 text-amber-500" />}
                                <span className="text-xs font-bold text-zinc-900 dark:text-zinc-100">{s.label}</span>
                            </div>
                            <span className={`text-[10px] font-black uppercase tracking-tighter ${s.status === "secure" ? "text-emerald-500" : "text-amber-500"}`}>
                                {s.status}
                            </span>
                        </div>
                        <p className="text-[10px] text-zinc-400 font-medium ml-6">{s.info}</p>
                    </div>
                ))}
            </div>

            <div className="mt-8 flex items-center gap-2 p-3 rounded-lg border border-dashed border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-900/50">
                <EyeOff className="h-4 w-4 text-zinc-400" />
                <p className="text-[10px] text-zinc-500 font-medium">Automatic redaction enabled for 14 enterprise domains.</p>
            </div>
        </div>
    );
}