import React from "react";
import AnimatedPage from "../components/AnimatedPage";
import { Link, useNavigate } from "react-router-dom";

export default function Rate() {
	const navigate = useNavigate();

	function returnHome() {
		navigate("/Home");
	}

	return (
		<AnimatedPage className='page-container page-container--rating'>
			<div className='screen '>
				<div className='screen__content'>
					<h1 className='titling-construction '>Notes</h1>
					<h2>merci pour votre participation</h2>
					<div class='rating'>
						<div class='rating__items'>
							<input type='radio' name='stars' id='st5' />
							<label for='st5'>
								<div class='star-fill'></div>

								<div
									class='label-description'
									data-content='Excellent'></div>
							</label>
							<input type='radio' name='stars' id='st4' />
							<label for='st4'>
								<div class='star-fill'></div>

								<div
									class='label-description'
									data-content='Good'></div>
							</label>
							<input type='radio' name='stars' id='st3' />
							<label for='st3'>
								<div class='star-fill'></div>

								<div class='label-description' data-content='OK'></div>
							</label>
							<input type='radio' name='stars' id='st2' />
							<label for='st2'>
								<div class='star-fill'></div>

								<div class='label-description' data-content='Bad'></div>
							</label>
							<input type='radio' name='stars' id='st1' />
							<label for='st1'>
								<div class='star-fill'></div>
								<div
									class='label-description'
									data-content='Terrible'></div>
							</label>
						</div>
					</div>

					<textarea
						placeholder="Qu'avez-vous pensé de cette expérience ?"
						name=''
						id=''
						cols='10'
						rows='2'></textarea>
					<button
						className='cta cta--construction cta--round cta--button-icon cta--back'
						onClick={returnHome}></button>
				</div>
			</div>
		</AnimatedPage>
	);
}
