"use client";
import React from 'react';
import { Modal } from '@/components/ui/modal';
import { useRouter } from 'next/navigation';

interface LoginRequiredModalProps {
  isOpen: boolean;
  onClose: () => void;
  redirectTo?: string;
}

const LoginRequiredModal: React.FC<LoginRequiredModalProps> = ({ isOpen, onClose, redirectTo = '/signin' }) => {
  const router = useRouter();

  const handleLogin = () => {
    onClose();
    router.push(redirectTo);
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose} className="max-w-md w-full p-6">
      <div className="space-y-4">
        <div className="flex items-start gap-3">
          <div className="mt-0.5">
            <svg className="w-6 h-6 text-brand-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20 10 10 0 000-20z" />
            </svg>
          </div>
          <div>
            <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Login Required</h3>
            <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">You need to login to reserve or start charging session.</p>
          </div>
        </div>

        <div className="flex gap-3 pt-2">
          <button
            type="button"
            onClick={onClose}
            className="flex-1 rounded-lg px-4 py-2 font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 transition-colors"
          >
            Later
          </button>
          <button
            type="button"
            onClick={handleLogin}
            className="flex-1 rounded-lg px-4 py-2 font-medium bg-brand-600 text-white hover:bg-brand-700 transition-colors"
          >
            Login Now
          </button>
        </div>
      </div>
    </Modal>
  );
};

export default LoginRequiredModal;