'use client'
import { deviceCartAtom } from '@/lib/atoms'
import type { Device } from '@prisma/client'
import { useAtomValue, useSetAtom } from 'jotai'
import { BadgePlus, CheckCheck } from 'lucide-react'
import React from 'react'
import { Button } from './ui/button'

export default function AddDevicesToCartButton({ device }: { device: Device }) {
  const setDeviceCart = useSetAtom(deviceCartAtom)
  const devices = useAtomValue(deviceCartAtom)
  return (
    <Button
      disabled={devices.some((d) => d.id === device.id)}
      onClick={() => setDeviceCart((prev) => [...prev, device])}
    >
      {devices.some((d) => d.id === device.id) ? (
        <>
          Added
          <CheckCheck />
        </>
      ) : (
        <>
          Add to cart
          <BadgePlus />

        </>

      )}
    </Button>
  )
}