veza/apps/web/src/components/education/modals/CertificateModal.tsx

import React from 'react';
import { Button } from '../../ui/button';
import { X, Download, Share2, Award } from 'lucide-react';
import { useToast } from '../../../context/ToastContext';

interface CertificateModalProps {
  studentName: string;
  courseName: string;
  completionDate: string;
  onClose: () => void;
}

export const CertificateModal: React.FC<CertificateModalProps> = ({
  studentName,
  courseName,
  completionDate,
  onClose,
}) => {
  const { addToast } = useToast();

  const handleDownload = () => {
    addToast('Downloading certificate PDF...', 'info');
  };

  const handleShare = () => {
    addToast('Shared to LinkedIn', 'success');
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-kodo-void/90 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      <div className="relative w-full max-w-3xl bg-kodo-graphite border border-kodo-steel rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col">
        <div className="p-4 border-b border-kodo-steel bg-kodo-ink flex justify-between items-center">
          <h3 className="font-bold text-white flex items-center gap-2">
            <Award className="w-5 h-5 text-kodo-gold" /> Completion Certificate
          </h3>
          <button onClick={onClose}>
            <X className="w-5 h-5 text-kodo-content-dim hover:text-white" />
          </button>
        </div>

        <div className="p-8 bg-kodo-ink flex justify-center">
          {/* Certificate Preview */}
          <div className="w-full aspect-[1.414] bg-white text-black p-8 relative shadow-2xl max-w-2xl border-8 border-double border-kodo-steel">
            <div className="h-full border-4 border-kodo-gold/20 flex flex-col items-center justify-center text-center p-8 bg-[url('https://www.transparenttextures.com/patterns/cream-paper.png')]">
              <div className="mb-8">
                <h1 className="text-4xl font-display font-bold text-kodo-text-main mb-2 uppercase tracking-widest">
                  Certificate
                </h1>
                <p className="text-sm font-serif italic text-kodo-content-dim">
                  of Completion
                </p>
              </div>

              <p className="text-sm text-kodo-content-dim mb-2">
                This is to certify that
              </p>
              <h2 className="text-3xl font-script font-bold text-kodo-steel mb-6 border-b-2 border-kodo-steel pb-2 px-8">
                {studentName}
              </h2>

              <p className="text-sm text-kodo-content-dim mb-2">
                has successfully completed the course
              </p>
              <h3 className="text-xl font-bold text-kodo-text-main mb-8 max-w-md leading-tight">
                {courseName}
              </h3>

              <div className="flex justify-between w-full mt-auto pt-8 border-t border-kodo-steel">
                <div className="text-left">
                  <p className="text-xs font-bold text-kodo-text-main">
                    {completionDate}
                  </p>
                  <p className="text-[10px] text-kodo-content-dim uppercase">Date</p>
                </div>
                <div className="text-right">
                  <div className="h-8 w-24 bg-kodo-slate mb-1 opacity-50"></div>{' '}
                  {/* Signature line */}
                  <p className="text-[10px] text-kodo-content-dim uppercase">
                    Veza Academy
                  </p>
                </div>
              </div>

              <div className="absolute top-8 right-8 opacity-20">
                <Award className="w-24 h-24 text-kodo-gold" />
              </div>
            </div>
          </div>
        </div>

        <div className="p-4 border-t border-kodo-steel bg-kodo-ink flex justify-end gap-4">
          <Button variant="ghost" onClick={onClose}>
            Close
          </Button>
          <Button
            variant="secondary"
            icon={<Share2 className="w-4 h-4" />}
            onClick={handleShare}
          >
            Share on LinkedIn
          </Button>
          <Button
            variant="primary"
            icon={<Download className="w-4 h-4" />}
            onClick={handleDownload}
          >
            Download PDF
          </Button>
        </div>
      </div>
    </div>
  );
};