import Input from '@/ui/Input';
import ToHTML from '@/ui/ToHTML';

export default function Page() {
  return (
    <div className="flex h-full w-full flex-col justify-between space-y-4">
      <div className="flex flex-col space-y-2">
        <h2 className="text-4xl font-bold">Titre du puzzle</h2>
        <p className="text-sm text-gray-400">Chapitre 2 - Les boucles à boucler</p>
      </div>
      <div className="flex h-screen overflow-y-auto">
        <ToHTML html="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa modi vitae labore. Distinctio nobis perspiciatis eligendi optio illum doloremque fuga laborum accusantium vero deserunt sit, ab neque! Dicta, eius tempore!" />
      </div>
      <div className="flex items-center justify-between space-x-2">
        <Input label="Réponse" type="text" placeholder="12" />
        <Input label="Code" type="file" accept=".py,.js,.ts,.java,.rust" />
      </div>
    </div>
  );
}
