veza/apps/web/src/components/marketplace/modals/LicenceDetailsModal.tsx

import React from 'react';
import { Button } from '../../ui/button';
import { X, ShieldCheck, Check, XCircle } from 'lucide-react';
import { ProductLicense } from '../../../types';

interface LicenceDetailsModalProps {
  license: ProductLicense;
  onClose: () => void;
  onAddToCart: () => void;
}

export const LicenceDetailsModal: React.FC<LicenceDetailsModalProps> = ({
  license,
  onClose,
  onAddToCart,
}) => {
  return (
    <div className="fixed inset-0 z-[400] flex items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-background/90 backdrop-blur-sm"
        onClick={onClose}
      ></div>
      <div className="relative w-full max-w-lg bg-muted border border-border rounded-xl shadow-2xl animate-scaleIn overflow-hidden flex flex-col max-h-layout-modal-sm">
        <div className="p-4 border-b border-border bg-card flex justify-between items-center">
          <h3 className="font-bold text-white flex items-center gap-2">
            <ShieldCheck className="w-5 h-5 text-muted-foreground" /> License Agreement
          </h3>
          <button onClick={onClose}>
            <X className="w-5 h-5 text-muted-foreground hover:text-white" />
          </button>
        </div>

        <div className="p-6 flex-1 overflow-y-auto">
          <div className="flex justify-between items-end mb-6">
            <div>
              <h2 className="text-2xl font-bold text-white">
                {license.name} License
              </h2>
              <p className="text-muted-foreground text-sm">
                Review usage rights and restrictions.
              </p>
            </div>
            <div className="text-3xl font-mono font-bold text-muted-foreground">
              ${license.price}
            </div>
          </div>

          <div className="space-y-6">
            <div>
              <h4 className="text-sm font-bold text-white uppercase tracking-wider mb-3 border-b border-border pb-1">
                What You Get
              </h4>
              <ul className="space-y-2">
                {license.features.map((feat, i) => (
                  <li
                    key={i}
                    className="flex items-start gap-4 text-sm text-foreground"
                  >
                    <div className="mt-0.5 bg-success/10 p-0.5 rounded-full">
                      <Check className="w-3 h-3 text-success" />
                    </div>
                    {feat}
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <h4 className="text-sm font-bold text-white uppercase tracking-wider mb-3 border-b border-border pb-1">
                Restrictions
              </h4>
              <ul className="space-y-2">
                <li className="flex items-start gap-4 text-sm text-muted-foreground">
                  <div className="mt-0.5 bg-destructive/10 p-0.5 rounded-full">
                    <XCircle className="w-3 h-3 text-destructive" />
                  </div>
                  Do not resell or redistribute as a sample pack.
                </li>
                <li className="flex items-start gap-4 text-sm text-muted-foreground">
                  <div className="mt-0.5 bg-destructive/10 p-0.5 rounded-full">
                    <XCircle className="w-3 h-3 text-destructive" />
                  </div>
                  Content ID registration is prohibited.
                </li>
              </ul>
            </div>

            <p className="text-xs text-muted-foreground italic">
              This is a simplified summary. Please read the full{' '}
              <button
                onClick={(e) => {
                  e.preventDefault();
                  // eslint-disable-next-line
                  alert("Legal contract preview unavailable in this demo.");
                }}
                className="text-primary hover:underline bg-transparent border-none p-0 inline cursor-pointer"
              >
                legal contract
              </button>{' '}
              before purchasing.
            </p>
          </div>
        </div>

        <div className="p-4 border-t border-border bg-card flex justify-end gap-4">
          <Button variant="ghost" onClick={onClose}>
            Close
          </Button>
          <Button
            variant="primary"
            onClick={() => {
              onAddToCart();
              onClose();
            }}
          >
            Add to Cart
          </Button>
        </div>
      </div>
    </div>
  );
};