// File Path: web/frontend/src/components/UIX/GDPRFooter/GDPRFooter.jsx
// GDPRFooter Component - Reusable footer with security features and GDPR information

import React, { memo, useMemo } from "react";
import { useUIXTheme } from "../themes/useUIXTheme.jsx";
import {
  ShieldCheckIcon,
  ServerIcon,
  GlobeAltIcon,
  HeartIcon,
} from "@heroicons/react/24/outline";

/**
 * GDPRFooter Component
 * Displays security features and GDPR compliance information
 *
 * @param {string} className - Additional CSS classes
 * @param {string} containerClassName - Additional classes for the outer container
 */
const GDPRFooter = memo(function GDPRFooter({
  className = "",
  containerClassName = ""
}) {
  const { getThemeClasses } = useUIXTheme();

  // Memoize theme classes
  const themeClasses = useMemo(
    () => ({
      borderSecondary: getThemeClasses("border-secondary"),
      bgCard: getThemeClasses("bg-card"),
    }),
    [getThemeClasses],
  );

  return (
    <div className={`flex-shrink-0 border-t ${themeClasses.borderSecondary} ${themeClasses.bgCard}/50 backdrop-blur-sm relative z-10 ${containerClassName}`}>
      <div className={`max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 ${className}`}>
        {/* Security Features */}
        <div className="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-8 text-sm">
          <div className="flex items-center space-x-2">
            <ShieldCheckIcon className={`h-4 w-4 ${getThemeClasses("icon-success")}`} />
            <span className={getThemeClasses("text-secondary")}>
              ChaCha20-Poly1305 Encryption
            </span>
          </div>
          <div className="flex items-center space-x-2">
            <ServerIcon className={`h-4 w-4 ${getThemeClasses("icon-info")}`} />
            <span className={getThemeClasses("text-secondary")}>Canadian Hosted</span>
          </div>
          <div className="flex items-center space-x-2">
            <GlobeAltIcon className={`h-4 w-4 ${getThemeClasses("icon-privacy")}`} />
            <span className={getThemeClasses("text-secondary")}>Privacy First</span>
          </div>
          <div className="flex items-center space-x-2">
            <HeartIcon className={`h-4 w-4 ${getThemeClasses("icon-featured")}`} />
            <span className={getThemeClasses("text-secondary")}>Made in Canada</span>
          </div>
        </div>

        {/* GDPR Information */}
        <div className={`mt-4 text-center text-xs ${getThemeClasses("text-secondary")} space-y-2`}>
          <p>
            <strong>Data Controller:</strong> Maple Open Tech Inc. |{" "}
            <strong>Location:</strong> Canada (Adequate protection under GDPR Art. 45)
          </p>
          <p>
            <strong>Your GDPR Rights:</strong> Access, rectify, erase, restrict processing, data portability, object to processing, withdraw consent, and lodge a complaint with your supervisory authority.
          </p>
          <p>
            <a
              href="/privacy-policy"
              className={`${getThemeClasses("link-primary")} underline`}
              target="_blank"
              rel="noopener noreferrer"
            >
              Privacy Policy
            </a>
            {" | "}
            <a
              href="/terms-of-service"
              className={`${getThemeClasses("link-primary")} underline`}
              target="_blank"
              rel="noopener noreferrer"
            >
              Terms of Service
            </a>
            {" | "}
            <strong>Contact DPO:</strong>{" "}
            <a
              href="mailto:privacy@mapleopentech.ca"
              className={`${getThemeClasses("link-primary")} underline`}
            >
              privacy@mapleopentech.ca
            </a>
          </p>
        </div>
      </div>
    </div>
  );
});

GDPRFooter.displayName = "GDPRFooter";

export default GDPRFooter;