import { CheckCircle2, Database, EyeOff, Lock } from "lucide-react";
import { memo } from "react";

const TRUST_ITEMS = [
  { icon: Lock, label: "Verschlüsselt", desc: "AES-256 für sensible Daten" },
  { icon: Database, label: "Lokal gespeichert", desc: "Eigene PostgreSQL-Datenbank" },
  { icon: EyeOff, label: "Kein Tracking", desc: "Keine Analytics, kein Telemetry" },
] as const;

export const DataTrustPanel = memo(function DataTrustPanel() {
  return (
    <div className="hidden xl:flex flex-col items-start gap-1.5 rounded-xl border border-border/40 bg-muted/30 px-3 py-2.5">
      <div className="flex items-center gap-1.5 text-xs font-medium text-emerald-600 dark:text-emerald-400">
        <CheckCircle2 className="size-3.5" />
        <span>Datenschutz aktiv</span>
      </div>
      <div className="flex flex-col gap-1">
        {TRUST_ITEMS.map(({ icon: Icon, label, desc }) => (
          <div key={label} className="flex items-center gap-1.5">
            <Icon className="size-3 text-muted-foreground/60" />
            <span className="text-[11px] leading-tight text-muted-foreground">{label}</span>
            <span className="text-[10px] leading-tight text-muted-foreground/50">· {desc}</span>
          </div>
        ))}
      </div>
    </div>
  );
});