'use client'

import { ArrowUpRight } from 'lucide-react'
import type { PlanFeature } from '../lib/plan.js'
import { planFeatureLabel } from '../lib/plan.js'

export function PlanUpgradeCallout({
  feature,
  requiredTier = 'pro',
  upgradeUrl,
}: {
  feature: PlanFeature
  requiredTier?: string
  upgradeUrl?: string | null
}) {
  return (
    <div
      className="border-border bg-muted/40 space-y-2 rounded-md border p-4"
      role="status"
      aria-live="polite"
    >
      <p className="text-foreground text-sm font-medium">
        Upgrade to unlock {planFeatureLabel(feature)}
      </p>
      <p className="text-muted-foreground text-sm">
        This feature requires the {requiredTier} plan. Audits, issue tracking, and export remain
        available on your current plan.
      </p>
      {upgradeUrl ? (
        <a
          href={upgradeUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="text-primary inline-flex items-center gap-1 text-sm font-medium hover:underline"
        >
          View plans
          <ArrowUpRight className="h-4 w-4" aria-hidden />
        </a>
      ) : null}
    </div>
  )
}
