import { BannerCategory } from '@/components/banner-category'
import { Card } from '@/components/card'
import { Differences } from '@/components/differences'
import { Hub } from '@/components/hub'
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 { Calendar, Clock4, User } from 'lucide-react'
import banner from '../../../public/images/banner.png'
import ImageCoverCourse from '../../../public/images/cover-course.png'

type CoursesCardTypes = {
  id: string
  image: { src: string; width: number; height: number }
  title: string
  hours: string
  category: string
  calender: string
}

const coursesCard: CoursesCardTypes[] = [
  {
    id: '1',
    image: ImageCoverCourse,
    title: 'Gestão em Saúde',
    hours: '30 h / Curso rápido',
    category: 'estudante',
    calender: 'Início imediato',
  },
  {
    id: '2',
    image: ImageCoverCourse,
    title: 'Gestão em Saúde',
    hours: '30 h / Curso rápido',
    category: 'estudante',
    calender: 'Início imediato',
  },
  {
    id: '3',
    image: banner,
    title: 'Gestão em Projetos',
    hours: '30 h / Curso rápido',
    category: 'Estudante',
    calender: 'Início imediato',
  },
  {
    id: '4',
    image: ImageCoverCourse,
    title: 'Gestão em Saúde',
    hours: '30 h / Curso rápido',
    category: 'estudante',
    calender: 'Início imediato',
  },
  {
    id: '5',
    image: ImageCoverCourse,
    title: 'Gestão em Saúde',
    hours: '30 h / Curso rápido',
    category: 'estudante',
    calender: 'Início imediato',
  },
  {
    id: '6',
    image: ImageCoverCourse,
    title: 'Gestão em Saúde',
    hours: '30 h / Curso rápido',
    category: 'estudante',
    calender: 'Início imediato',
  },
  {
    id: '7',
    image: ImageCoverCourse,
    title: 'Gestão em Saúde',
    hours: '30 h / Curso rápido',
    category: 'estudante',
    calender: 'Início imediato',
  },
  {
    id: '8',
    image: ImageCoverCourse,
    title: 'Gestão em Saúde',
    hours: '30 h / Curso rápido',
    category: 'estudante',
    calender: 'Início imediato',
  },
  {
    id: '9',
    image: banner,
    title: 'Gestão em Projetos',
    hours: '30 h / Curso rápido',
    category: 'Estudante',
    calender: 'Início imediato',
  },
  {
    id: '10',
    image: ImageCoverCourse,
    title: 'Gestão em Saúde',
    hours: '30 h / Curso rápido',
    category: 'estudante',
    calender: 'Início imediato',
  },
]

export default function Students() {
  return (
    <main>
      <BannerCategory title="Estudante" />
      <NavLinkCategory />
      <SearchFilter />
      <div className="grid 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={`${course.category}/${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 />
      <Hub />
    </main>
  )
}
