'use client'

import Link from 'next/link'
import { Lock, ArrowUpCircle, ArrowLeft } from 'lucide-react'

interface FeatureBlockedPageProps {
  featureLabel: string
}

export default function FeatureBlockedPage({ featureLabel }: FeatureBlockedPageProps) {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
      <div className="text-center max-w-md mx-auto px-4">
        <div className="w-16 h-16 bg-orange-100 dark:bg-orange-900/30 rounded-full flex items-center justify-center mx-auto mb-4">
          <Lock className="w-8 h-8 text-orange-500" />
        </div>
        <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-2">Fitur Tidak Tersedia</h2>
        <p className="text-gray-600 dark:text-gray-300 mb-6">
          Plan yang sedang berjalan tidak diizinkan mengakses fitur <strong>{featureLabel}</strong>. Silahkan upgrade untuk membuka fitur ini.
        </p>
        <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
          <Link
            href="/dashboard/subscription"
            className="inline-flex items-center gap-2 bg-primary-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-primary-700 transition-colors"
          >
            <ArrowUpCircle className="w-5 h-5" />
            Upgrade Plan
          </Link>
          <Link
            href="/dashboard"
            className="inline-flex items-center gap-2 text-gray-600 dark:text-gray-300 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
          >
            <ArrowLeft className="w-5 h-5" />
            Kembali
          </Link>
        </div>
      </div>
    </div>
  )
}