import React from 'react'

export default function WorldPreviewButton({ previewUrl, className = '', disabledReason = 'Save the world once to unlock the full preview page.' }) {
  if (!previewUrl) {
    return (
      <div className={`rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-400 ${className}`.trim()}>
        <div className="font-semibold text-slate-200">Full preview unavailable</div>
        <div className="mt-1 text-xs leading-5 text-slate-500">{disabledReason}</div>
      </div>
    )
  }

  return (
    <a
      href={previewUrl}
      target="_blank"
      rel="noreferrer"
      className={`inline-flex items-center justify-center gap-2 rounded-2xl border border-indigo-300/20 bg-indigo-400/10 px-4 py-3 text-sm font-semibold text-indigo-100 transition hover:bg-indigo-400/15 ${className}`.trim()}
    >
      <i className="fa-regular fa-eye" />
      Open full preview
    </a>
  )
}