sarlink-portal/components/device-card.tsx

'use client'
import { deviceCartAtom } from '@/lib/atoms'
import { cn } from '@/lib/utils'
import type { Device } from '@prisma/client'
import { useAtom } from 'jotai'
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 (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-")}>
        <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={"secondary"}>
              <span className="font-medium">
                {device.mac}
              </span>
            </Badge>
          </div>

          {device.isActive && (
            <span className="text-muted-foreground">
              Active until{" "}
              {new Date().toLocaleDateString("en-US", {
                month: "short",
                day: "2-digit",
                year: "numeric",
              })}
            </span>
          )}

          {(device.blocked && device.blockedBy === "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?.reasonForBlocking}
              </p>
            </div>
          )}

        </div>
        <div>
          {!parentalControl ? (
            <AddDevicesToCartButton device={device} />
          ) : (
            <BlockDeviceDialog admin={false} type={device.blocked ? "unblock" : "block"} device={device} />
          )}
        </div>
      </div>
    </div>
  )
}