sarlink-portal/components/device-card.tsx

"use client";
import { deviceCartAtom } from "@/lib/atoms";
import type { Device } from "@/lib/backend-types";
import { cn } from "@/lib/utils";
import { useAtom } from "jotai";
import { HandCoins } from "lucide-react";
import Link from "next/link";
import AddDevicesToCartButton from "./add-devices-to-cart-button";
import BlockDeviceDialog from "./block-device-dialog";
import { Badge } from "./ui/badge";

export default function DeviceCard({
	device,
	parentalControl,
}: { device: Device; parentalControl?: boolean }) {
	const [devices, setDeviceCart] = useAtom(deviceCartAtom);

	const isChecked = devices.some((d) => d.id === device.id);

	return (
		<div
			onKeyUp={() => {}}
			onClick={() => {
				if (device.blocked) return;
				if (device.is_active === true) return;
				if (device.has_a_pending_payment === true) return;
				if (parentalControl === true) return;
				setDeviceCart((prev) =>
					devices.some((d) => d.id === device.id)
						? prev.filter((d) => d.id !== device.id)
						: [...prev, device],
				);
			}}
			className="w-full"
		>
			<div
				className={cn(
					"flex text-sm justify-between items-center my-2 p-4 border rounded-md",
					isChecked ? "bg-accent" : "bg-",
					device.is_active
						? "cursor-not-allowed bg-accent-foreground/10 hover:bg-accent-foreground/10"
						: "cursor-pointer hover:bg-muted-foreground/10",
				)}
			>
				<div className="">
					<div className="font-semibold flex flex-col items-start gap-2 mb-2">
						<Link
							className="font-medium hover:underline"
							href={`/devices/${device.id}`}
						>
							{device.name}
						</Link>
						<Badge variant={"outline"}>
							<span className="font-medium">{device.mac}</span>
						</Badge>
					</div>

					{device.is_active ? (
						<div className="text-muted-foreground">
							Active until{" "}
							<span className="font-semibold">
								{new Date(device.expiry_date || "").toLocaleDateString(
									"en-US",
									{
										month: "short",
										day: "2-digit",
										year: "numeric",
									},
								)}
							</span>
						</div>
					) : (
						<p className="text-muted-foreground">Device Inactive</p>
					)}
					{device.has_a_pending_payment && (
						<Link href={`/payments/${device.pending_payment_id}`}>
							<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground text-yellow-600">
								Payment Pending{" "}
								<HandCoins className="animate-pulse" size={14} />
							</span>
						</Link>
					)}

					{device.blocked && device.blocked_by === "ADMIN" && (
						<div className="p-2 rounded border my-2 w-full">
							<span className="uppercase text-red-500">Blocked by admin </span>
							<p className="text-neutral-500">{device?.reason_for_blocking}</p>
						</div>
					)}
				</div>
				<div>
					{!parentalControl ? (
						<AddDevicesToCartButton device={device} />
					) : (
						<BlockDeviceDialog
							admin={false}
							type={device.blocked ? "unblock" : "block"}
							device={device}
						/>
					)}
				</div>
			</div>
		</div>
	);
}