import Image from 'next/image'

import { BannerCategory } from '@/components/banner-category'
import { CarouselComponent } from '@/components/corousel-component'
import { CourseDetails } from '@/components/course-details'
import { Differences } from '@/components/differences'
import { SignUp } from '@/components/sign-up'
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import imageCapa from '../../../../public/images/banner.png'

export default function CoursePage({
  params,
}: {
  params: { courseId: string }
}) {
  return (
    <>
      <BannerCategory title={params.courseId} />
      <div className="flex flex-col md:flex-row px-6 pt-20 gap-6">
        <div className="flex flex-col gap-7">
          <h1 className="block md:hidden text-green-400 text-3xl font-thin">
            História Contemporânea dos Estados Unidos
          </h1>
          <Image
            src={imageCapa}
            className="min-w-[348px] h-[464px] object-cover rounded-lg"
            alt="Imagem de capa do curso"
          />
          <Button variant="secondary" className="uppercase hidden md:block">
            Quero este curso
          </Button>
        </div>
        <div className="flex flex-col gap-6">
          <h1 className="hidden md:block text-green-400 text-4xl font-extrabold">
            História Contemporânea dos Estados Unidos
          </h1>
          <div className="flex flex-col-reverse lg:flex-row gap-6 w-full">
            <div className="flex flex-col lg:w-1/2">
              <h3 className="font-bold">O que você vai aprender</h3>
              <p>
                Este curso levará você por uma jornada desde os tumultuados anos
                de 1970 até os dias atuais, explorando os impactos decisivos dos
                governos de Bush, Obama, Trump e Biden. Descubra os
                momentos-chave que moldaram a história contemporânea dos Estados
                Unidos, desde a resiliência diante de crises até as mudanças
                geopolíticas e sociais. Vamos desvendar os bastidores dos
                eventos que marcaram época, proporcionando uma compreensão
                profunda e contextualizada da evolução norte-americana.
                Prepare-se para uma experiência de aprendizado envolvente e
                reveladora, onde o passado ilumina o presente, moldando o
                futuro.
              </p>
              <h3 className="font-bold mt-6">Com quem você vai aprender</h3>
              <p>Professor João Silva</p>
            </div>
            <div className="lg:w-1/2">
              <CourseDetails />
            </div>
          </div>
          <Button variant="secondary" className="uppercase block md:hidden">
            Quero este curso
          </Button>
          <span className="font-bold mt-4 block md:hidden">Saiba mais:</span>
          <Accordion type="single" collapsible className="w-full">
            <AccordionItem value="item-1">
              <AccordionTrigger>Módulos</AccordionTrigger>
              <AccordionContent>
                Yes. It adheres to the WAI-ARIA design pattern.
              </AccordionContent>
            </AccordionItem>
          </Accordion>
        </div>
      </div>
      <div className="my-10 px-6">
        <Separator orientation="horizontal" />
      </div>
      <div>
        <h2 className="text-center text-green-400 font-thin text-2xl">
          Cursos relacionados
        </h2>
        <div className="px-14 mt-10 mb-20">
          <CarouselComponent />
        </div>
      </div>
      <SignUp />
      <Differences />
    </>
  )
}
