import { About } from '@/components/about'
import { BannerCategory } from '@/components/banner-category'
import { Card } from '@/components/card'
import { Differences } from '@/components/differences'
import { NavLinkCategory } from '@/components/nav-link-category'
import { PaginationComponent } from '@/components/pagination-component'
import SearchFilter from '@/components/search-filter'
import { SignUp } from '@/components/sign-up'
import { CoursesCard } from '@/utils/courses-array'
import { Calendar, Clock4, User } from 'lucide-react'

export default function Students() {
  return (
    <main>
      <BannerCategory title="Estudante" />
      <NavLinkCategory />
      <SearchFilter />
      <div className="grid rounded-none grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 grid-rows-3 lg:grid-rows-2 gap-4 md:gap-6 p-6">
        {CoursesCard.map((course) => (
          <div className="flex justify-center" key={course.id}>
            <Card.Root link={`curso/${course.id}`}>
              <Card.Image image={course.image.src} width="273" height="365">
                <Card.Title title={course.title} />
              </Card.Image>
              <Card.Content description={course.hours}>
                <Card.Icon icon={Clock4} />
              </Card.Content>
              <Card.Content description={course.category}>
                <Card.Icon icon={User} />
              </Card.Content>
              <Card.Content description={course.calender}>
                <Card.Icon icon={Calendar} />
              </Card.Content>
            </Card.Root>
          </div>
        ))}
      </div>
      <div className="my-6">
        <PaginationComponent pageIndex={0} totalCount={105} perPage={10} />
      </div>
      <Differences />
      <SignUp />
      <About.Root>
        <About.Globo>
          <p className="hidden md:block text-center">
            Nós, na <b>Indústria Criativa</b>, oferecemos serviços educacionais
            e assessoria profissional a instituições públicas e privadas. Nossa
            meta é conectar pessoas, empresas e instituições por meio do
            conhecimento técnico-científico aplicado aos negócios.
          </p>
        </About.Globo>
        <About.Companies />
      </About.Root>
    </main>
  )
}
