import React from 'react';
import { Card } from './Card';

interface UpgradePromptProps {
  feature: string;
  description: string;
}

export function UpgradePrompt({ feature, description }: UpgradePromptProps) {
  return (
    <Card className="cra-upgrade-prompt">
      <div className="cra-upgrade-content">
        <div className="cra-upgrade-icon">🔒</div>
        <h3>Upgrade to Unlock {feature}</h3>
        <p>{description}</p>
        <div className="cra-upgrade-plans">
          <div className="cra-upgrade-plan">
            <strong>Basic - $19/month</strong>
            <ul>
              <li>5 plugins monitored</li>
              <li>Weekly vulnerability scans</li>
              <li>Email alerts</li>
              <li>Compliance reports</li>
            </ul>
          </div>
          <div className="cra-upgrade-plan cra-upgrade-plan-featured">
            <strong>Pro - $45/month</strong>
            <ul>
              <li>20 plugins monitored</li>
              <li>Daily vulnerability scans</li>
              <li>Email alerts</li>
              <li>Priority support</li>
              <li>Compliance reports</li>
            </ul>
          </div>
        </div>
        <a
          href="https://www.resiliencewp.com/pricing"
          target="_blank"
          rel="noopener noreferrer"
          className="cra-btn cra-btn-primary cra-btn-lg"
        >
          Upgrade Now
        </a>
      </div>
    </Card>
  );
}