src/components/Layout/LayoutSwitchConfirmation.tsx

import { X } from 'lucide-react';

interface LayoutSwitchConfirmationProps {
  onKeep: () => void;
  onReplace: () => void;
  onCancel: () => void;
}

export default function LayoutSwitchConfirmation({
  onKeep,
  onReplace,
  onCancel
}: LayoutSwitchConfirmationProps) {
  return (
    <div
      className="fixed inset-0 z-[100] flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm"
      onClick={onCancel}
    >
      {/* Modal Container */}
      <div
        className="bg-[#2b2d31] rounded-[12px] shadow-2xl max-w-[480px] w-full mx-4 overflow-hidden"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-[#3e4044]">
          <h2 className="text-white text-[18px] font-semibold">
            Switch Layout
          </h2>
          <button
            onClick={onCancel}
            className="text-gray-400 hover:text-white transition-colors p-1 hover:bg-[#3e4044] rounded"
          >
            <X size={20} />
          </button>
        </div>

        {/* Content */}
        <div className="px-6 py-5">
          <p className="text-gray-300 text-[15px] leading-relaxed mb-4">
            You have custom objects on the canvas. What would you like to do?
          </p>

          {/* Options */}
          <div className="space-y-3">
            {/* Keep Option */}
            <div className="bg-[#1e1f22] rounded-[8px] p-4 border border-[#3e4044]">
              <div className="flex items-start gap-3">
                <div className="w-5 h-5 rounded-full border-2 border-[#5865f2] flex-shrink-0 mt-0.5" />
                <div>
                  <p className="text-white font-medium text-[14px] mb-1">
                    Keep my objects
                  </p>
                  <p className="text-gray-400 text-[13px]">
                    Add the new layout objects alongside your existing work
                  </p>
                </div>
              </div>
            </div>

            {/* Replace Option */}
            <div className="bg-[#1e1f22] rounded-[8px] p-4 border border-[#3e4044]">
              <div className="flex items-start gap-3">
                <div className="w-5 h-5 rounded-full border-2 border-[#ed4245] flex-shrink-0 mt-0.5" />
                <div>
                  <p className="text-white font-medium text-[14px] mb-1">
                    Replace everything
                  </p>
                  <p className="text-gray-400 text-[13px]">
                    Remove all objects and load a fresh layout
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Actions */}
        <div className="px-6 py-4 bg-[#1e1f22] flex items-center justify-end gap-3">
          <button
            onClick={onCancel}
            className="px-4 py-2 rounded-[6px] text-white text-[14px] font-medium hover:bg-[#3e4044] transition-colors"
          >
            Cancel
          </button>
          <button
            onClick={onReplace}
            className="px-4 py-2 rounded-[6px] bg-[#ed4245] text-white text-[14px] font-medium hover:bg-[#d13438] transition-colors"
          >
            Replace
          </button>
          <button
            onClick={onKeep}
            className="px-4 py-2 rounded-[6px] bg-[#5865f2] text-white text-[14px] font-medium hover:bg-[#4752c4] transition-colors"
          >
            Keep
          </button>
        </div>
      </div>
    </div>
  );
}