Untitled

"use client";
import Image from "next/image";
import Link from "next/link";
import React, { useEffect } from "react";
import { FaBackspace } from "react-icons/fa";

export default function CameraPage() {
  return (
    <main className="flex flex-col items-center justify-center min-h-screen p-24 bg-forest-pic ">
      <div className="absolute z-0 w-full h-full backdrop-blur-sm"></div>
      <div className="relative place-content-center flex flex-col h-screen">

        <div className="flex flex-1 items-center justify-center">
          <p className={`m-0 max-w-[50ch] text-center text-4xl opacity-80 text-white`}>
              FACE DETECTION
          </p>
        </div>

        <div className="flex-1">
        <img className="rounded-image" src={"/api/video_feed"} />
        <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
          <span className="text-white text-lg opacity-80 ">COME CLOSER</span>
        </div>
        </div>
    
        <div className="flex items-center justify-center flex-1">
          <Link
            href="/"
            className="px-6 py-2 transition-colors border border-white rounded-lg group hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30 border-slate-700"
            target="_blank"
            rel="noopener noreferrer"
            onClick={() => {
              fetch("/api/cancel/punishment");
            }}>
            <p className={`m-0 max-w-[50ch] text-center text-white text-lg opacity-80`}>
                  BACK
            </p>
          </Link>
        </div>

      </div>
    </main>
  );
}