import React from "react";
import PropTypes from "prop-types";
import { useNavigate } from "react-router-dom";
import { MonitorOff, Construction, House } from "lucide-react";

export default function DesktopOnlyTapume({
  title = "Área disponível apenas no desktop",
  message = "Esta experiência foi preparada para telas maiores. Acesse em um computador para aproveitar todos os recursos.",
  homePath = "/",
  homeLabel = "Voltar para Home",
}) {
  const navigate = useNavigate();

  return (
    <section className="relative flex-1 min-h-0 overflow-hidden primary-gradient">
      <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_20%_20%,#ffffff_0%,transparent_45%),radial-gradient(circle_at_80%_80%,#d5df50_0%,transparent_38%)]" />

      <div className="relative h-full w-full flex items-center justify-center px-6 py-10">
        <div className="w-full max-w-xl rounded-3xl border border-white/25 bg-white/12 backdrop-blur-md shadow-2xl p-8 text-white">
          <div className="flex items-center gap-3 mb-5">
            <span className="inline-flex h-12 w-12 items-center justify-center rounded-xl bg-white/20 border border-white/35">
              <Construction className="w-6 h-6" />
            </span>
            <span className="inline-flex items-center gap-2 rounded-full bg-white/15 border border-white/30 px-3 py-1 text-sm font-semibold">
              <MonitorOff className="w-4 h-4" />
              Uso em desktop
            </span>
          </div>

          <h1 className="font-title text-3xl leading-tight mb-3">{title}</h1>
          <p className="font-sans text-base md:text-lg text-white/95 leading-relaxed">
            {message}
          </p>

          <div className="mt-6 inline-flex items-center rounded-full bg-black/20 border border-white/25 px-4 py-2 text-sm font-medium">
            Dica: em telas maiores, esta área libera editor e interações completas.
          </div>

          <button
            type="button"
            onClick={() => navigate(homePath)}
            className="mt-6 inline-flex items-center gap-2 rounded-full bg-[var(--action-green)] text-black px-5 py-3 font-semibold shadow-lg transition-transform duration-200 hover:scale-[1.02]"
          >
            <House className="w-4 h-4" />
            {homeLabel}
          </button>
        </div>
      </div>
    </section>
  );
}

DesktopOnlyTapume.propTypes = {
  title: PropTypes.string,
  message: PropTypes.string,
  homePath: PropTypes.string,
  homeLabel: PropTypes.string,
};
