import { AlertTriangle } from 'lucide-react';

const allowedHosts = new Set(['localhost', '127.0.0.1', '::1', 'evil-wordle.spaceistyping.com']);

const isAllowedHost = () => {
  if (typeof window === 'undefined') return true;
  return allowedHosts.has(window.location.hostname);
};

export function AccessWarning() {
  if (isAllowedHost()) return null;

  return (
    <div className="border-b border-amber-400/30 bg-amber-400/10 px-4 py-3 text-amber-50">
      <div className="mx-auto flex max-w-7xl items-start gap-3 text-sm">
        <AlertTriangle className="mt-0.5 shrink-0 text-amber-300" size={18} />
        <p>
          This copy is being viewed from <span className="font-black">{window.location.host}</span>. The intended
          locations are local development links like <span className="font-black">127.0.0.1</span> or{' '}
          <span className="font-black">evil-wordle.spaceistyping.com</span>.
        </p>
      </div>
    </div>
  );
}
