import React from 'react';
import { Link } from 'react-router';
import { LockClosedIcon } from '@heroicons/react/24/outline';
import { useSubscription } from '../../hooks/useSubscription';

interface FeatureGateProps {
  feature: string;
  children: React.ReactNode;
}

export default function FeatureGate({ feature, children }: FeatureGateProps) {
  const { hasFeature, hasPlan } = useSubscription();

  if (hasFeature(feature)) return <>{children}</>;

  return (
    <div style={{
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      minHeight: 320, gap: 16, padding: 40, textAlign: 'center',
    }}>
      <div style={{
        width: 64, height: 64, borderRadius: '50%',
        background: 'oklch(0.97 0.01 256)',
        display: 'grid', placeItems: 'center',
        border: '1px solid var(--border)',
      }}>
        <LockClosedIcon style={{ width: 28, color: 'var(--text-3)' }} />
      </div>
      <div>
        <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 6 }}>
          این قابلیت در پنل فعلی شما فعال نیست
        </div>
        <div style={{ color: 'var(--text-3)', fontSize: 13.5, maxWidth: 360, lineHeight: 1.6 }}>
          {hasPlan
            ? 'برای استفاده از این قابلیت پنل خود را ارتقاء دهید'
            : 'برای استفاده از این قابلیت یک پنل اشتراکی فعال کنید'}
        </div>
      </div>
      <Link to="/admin/subscription" className="btn primary sm" style={{ textDecoration: 'none' }}>
        {hasPlan ? 'ارتقاء پنل' : 'مشاهده پنل‌های اشتراکی'}
      </Link>
    </div>
  );
}