"use client"

import { addEmailtoBoard } from "@/app/actions/boardActions";
import { useRouter } from "next/navigation";
import { useRef } from "react";

const NewUserAccess = ({boardId}: {boardId:string}) => {
    const router = useRouter();
    const inputRef = useRef<HTMLInputElement>(null);
    async function addEmail(formData: FormData){
        const email = formData.get('email')?.toString() || '';
        await addEmailtoBoard(boardId, email);
        if(inputRef.current){
            inputRef.current.value = '';
        }
        router.refresh();
    }




  return (
    <form action={addEmail} className="max-w-xs">
        <h2 className="mb-1 text-sm">Add email</h2>
        <input ref={inputRef} type="text" placeholder="email@example.com" name="email" className="border p-2 w-full rounded-md"/>
        <button type="submit" className="w-full mt-2">Save</button>
    </form>
  )
}

export default NewUserAccess