'use client'

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { FormEvent } from 'react'

export const Form = ({transformUrlToCode} : {transformUrlToCode: (url: string) => void}) =>{
	
    const handleSubmit = (evt: FormEvent) => {
        const form = evt.currentTarget as HTMLFormElement;
        const url = form.elements.namedItem('url') as HTMLInputElement;
        transformUrlToCode(url.value);
    }

	return (
		<form className="flex flex-col gap-5"
			onSubmit={(evt) => {
				evt.preventDefault()
				handleSubmit(evt)
			}}
		>
			<Label htmlFor="Introduce to URL de la imagen" />
			<Input type="text" name="url" id="url" placeholder="https://tu-screnshot.jpg"/>
			<Button>Generar imágen</Button>
		</form>
	)
}