"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>
);
}