'use client'
import { deviceCartAtom } from '@/lib/atoms'
import type { Device } from '@prisma/client'
import { useAtomValue, useSetAtom } from 'jotai'
import React from 'react'

export default function AddDevicesToCartButton({ device }: { device: Device }) {
  const setDeviceCart = useSetAtom(deviceCartAtom)
  const devices = useAtomValue(deviceCartAtom)

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

  return (
    <input
      type="checkbox"
      className='peer accent-[#f49d1b] size-4'
      checked={isChecked}
      onChange={() => setDeviceCart((prev) =>
        isChecked
          ? prev.filter((d) => d.id !== device.id)
          : [...prev, device]
      )}
    />
  )
}