"use client";

import { Button } from "@/components/ui/button";
import { deviceCartAtom } from "@/lib/atoms";
import { useAtomValue } from "jotai";
import { MonitorSmartphone } from "lucide-react";
import { usePathname, useRouter } from "next/navigation";

export function DeviceCartDrawer() {
	const pathname = usePathname();
	const devices = useAtomValue(deviceCartAtom);
	const router = useRouter();

	if (pathname === "/payment" || pathname === "/devices-to-pay") {
		return null;
	}

	if (devices.length === 0) return null;
	return (
		<Button
			size={"lg"}
			className="bg-sarLinkOrange fixed bottom-20  w-80 uppercase h-12 z-20 left-1/2 transform -translate-x-1/2"
			onClick={() => router.push("/devices-to-pay")}
			variant="outline"
		>
			<MonitorSmartphone />
			Pay {devices.length > 0 && `(${devices.length})`} Device
		</Button>
	);
}