"use client";

import { Monitor, LogOut } from "lucide-react";
import { signOut } from "next-auth/react";

export function DesktopRequired() {
  return (
    <div className="md:hidden fixed inset-0 z-40 flex flex-col items-center justify-center bg-white px-8 text-center">
      <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary-50 mb-5">
        <Monitor className="h-8 w-8 text-primary-600" />
      </div>
      <h2 className="text-xl font-semibold text-neutral-900 mb-2">Desktop Required</h2>
      <p className="text-sm text-neutral-500 max-w-xs leading-relaxed">
        PPMS is designed for use on a desktop or laptop browser. Please switch to a larger screen to
        access all features.
      </p>
      <p className="mt-4 text-xs text-neutral-400 italic">
        PMS — it runs the ship, from the right seat.
      </p>
      <button
        onClick={() => signOut({ callbackUrl: "/login" })}
        className="mt-8 flex items-center gap-2 rounded-lg border border-neutral-200 px-4 py-2.5 text-sm font-medium text-neutral-600 hover:bg-neutral-50 transition-colors"
      >
        <LogOut className="h-4 w-4" />
        Sign out
      </button>
    </div>
  );
}