SkateSpots/src/components/Nip05Required.tsx

import { Link } from 'react-router-dom';
import { ShieldCheck, ExternalLink, AlertTriangle } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { NIP05_PROVIDERS } from '@/lib/nip05Providers';
import { cn } from '@/lib/utils';

interface Nip05RequiredProps {
  /** What the user is trying to do, e.g. "tour organizers", "sellers". */
  role?: string;
  /** Extra sentence explaining why it matters for this feature. */
  reason?: string;
  /** "gate" = full centered card (blocks the page). "banner" = inline notice. */
  variant?: 'gate' | 'banner';
  /** Accent hex color. Defaults to the app red used for required gates. */
  color?: string;
  className?: string;
}

/**
 * Consistent "NIP-05 verification required" prompt used across create/become
 * flows. Lists the curated, working providers (see lib/nip05Providers) and
 * links to Settings. Single source of truth so obsolete providers never linger.
 */
export function Nip05Required({
  role = 'creators',
  reason,
  variant = 'gate',
  color = '#ef4444',
  className,
}: Nip05RequiredProps) {
  const providerList = (
    <div className="space-y-2">
      <p className="text-[11px] font-black uppercase tracking-widest text-gray-400">
        Get a free / cheap NIP-05
      </p>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
        {NIP05_PROVIDERS.map((p) => (
          <a
            key={p.name}
            href={p.url}
            target="_blank"
            rel="noopener noreferrer"
            className="group flex items-center justify-between gap-2 rounded-lg border border-white/10 bg-black/40 p-3 text-left transition-all hover:border-white/30 hover:bg-white/5"
          >
            <div className="min-w-0">
              <div className="flex items-center gap-1.5 text-sm font-bold text-white">
                <span className="truncate">{p.name}</span>
                <ExternalLink className="h-3 w-3 flex-shrink-0 text-gray-500 group-hover:text-gray-300" />
              </div>
              <div className="text-xs text-gray-400 truncate">{p.desc}</div>
            </div>
            <span
              className={cn(
                'flex-shrink-0 rounded-full border px-2 py-0.5 text-[10px] font-bold',
                p.free
                  ? 'border-green-500/30 bg-green-500/15 text-green-400'
                  : 'border-yellow-500/30 bg-yellow-500/15 text-yellow-400'
              )}
            >
              {p.free ? 'Free' : 'Paid'}
            </span>
          </a>
        ))}
      </div>
    </div>
  );

  if (variant === 'banner') {
    return (
      <Card
        className={cn('border-2', className)}
        style={{ borderColor: `${color}55`, backgroundColor: `${color}12` }}
      >
        <CardContent className="p-4 space-y-3">
          <div className="flex items-start gap-3">
            <AlertTriangle className="h-5 w-5 flex-shrink-0 mt-0.5" style={{ color }} />
            <div>
              <h3 className="font-bold mb-1" style={{ color }}>
                NIP-05 Verification Required
              </h3>
              <p className="text-sm text-gray-300">
                {reason ??
                  `To prevent spam and build trust, ${role} need a verified Nostr address (NIP-05).`}
              </p>
            </div>
          </div>
          {providerList}
          <Link to="/settings?section=nip05">
            <Button
              size="sm"
              variant="outline"
              className="font-bold"
              style={{ borderColor: `${color}55`, color }}
            >
              Add NIP-05 in Settings
            </Button>
          </Link>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card
      className={cn('max-w-xl mx-auto border-2', className)}
      style={{ borderColor: `${color}55`, backgroundColor: `${color}10` }}
    >
      <CardContent className="py-10 px-6 text-center">
        <div
          className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"
          style={{ backgroundColor: `${color}22` }}
        >
          <ShieldCheck className="h-8 w-8" style={{ color }} />
        </div>
        <h2 className="text-xl font-bold mb-2" style={{ color }}>
          NIP-05 Verification Required
        </h2>
        <p className="text-gray-300 mb-2">
          {reason ??
            `To prevent spam and build trust, ${role} must have NIP-05 verification.`}
        </p>
        <p className="text-gray-500 text-sm mb-6">
          NIP-05 proves your identity by linking your Nostr profile to a domain — like{' '}
          <span className="text-gray-300">you@example.com</span>.
        </p>

        <div className="max-w-md mx-auto mb-6">{providerList}</div>

        <Link to="/settings?section=nip05">
          <Button className="bg-[#ccff00] text-black hover:bg-[#ccff00]/90 font-bold">
            Update Your Profile
          </Button>
        </Link>
      </CardContent>
    </Card>
  );
}