"use client";

import { motion, AnimatePresence } from "framer-motion";
import { X, Crown } from "lucide-react";
import Link from "next/link";

interface PlanRestrictionModalProps {
    isOpen: boolean;
    onClose: () => void;
}

export default function PlanRestrictionModal({ isOpen, onClose }: PlanRestrictionModalProps) {
    return (
        <AnimatePresence>
            {isOpen && (
                <div className="fixed inset-0 z-[60] flex items-center justify-center p-4">
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        onClick={onClose}
                        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
                    />
                    <motion.div
                        initial={{ opacity: 0, scale: 0.95, y: 20 }}
                        animate={{ opacity: 1, scale: 1, y: 0 }}
                        exit={{ opacity: 0, scale: 0.95, y: 20 }}
                        className="relative bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden"
                    >
                        {/* Close Button */}
                        <button
                            onClick={onClose}
                            className="absolute top-4 right-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full transition-colors z-10"
                        >
                            <X className="w-5 h-5" />
                        </button>

                        {/* Content */}
                        <div className="p-8 text-center">
                            <div className="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-6">
                                <Crown className="w-8 h-8 text-yellow-600" />
                            </div>

                            <h3 className="text-2xl font-bold text-gray-900 mb-2">
                                Premium Feature
                            </h3>

                            <p className="text-gray-600 mb-8">
                                To save tenders to your personal list, you need an active subscription plan. Unlock this feature and many more by upgrading today!
                            </p>

                            <div className="flex flex-col gap-3">
                                <Link
                                    href="/plans"
                                    className="w-full py-3 bg-gradient-to-r from-yellow-500 to-yellow-600 text-white font-semibold rounded-xl hover:from-yellow-600 hover:to-yellow-700 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5"
                                >
                                    View Plans & Upgrade
                                </Link>
                                <button
                                    onClick={onClose}
                                    className="w-full py-3 text-gray-600 font-medium hover:bg-gray-50 rounded-xl transition-colors"
                                >
                                    Maybe Later
                                </button>
                            </div>
                        </div>

                        {/* Decoration */}
                        <div className="h-1.5 w-full bg-gradient-to-r from-yellow-400 via-yellow-500 to-yellow-600" />
                    </motion.div>
                </div>
            )}
        </AnimatePresence>
    );
}