import type { Device } from '@prisma/client'
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 }) {
  return (
    <div>
      <div className="flex text-sm shadow flex-col items-start p-2 border rounded border-dashed">
        <div className="font-semibold flex 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>

        <span className="text-muted-foreground">
          Active until{" "}
          {new Date().toLocaleDateString("en-US", {
            month: "short",
            day: "2-digit",
            year: "numeric",
          })}
        </span>
        {device.blocked && (
          <div className="p-2 rounded border my-2 w-full">
            <span>Comment: </span>
            <p className="text-neutral-500">
              blocked because he was watching youtube
            </p>
          </div>
        )}
        {!parentalControl ? (
          <AddDevicesToCartButton device={device} />
        ) : (
          <BlockDeviceDialog device={device} />
        )}
      </div>
    </div>
  )
}