import { Calendar, Clock4, DollarSign, UserRound } from 'lucide-react'

export function CourseDetails() {
  return (
    <ul className="flex flex-col gap-8">
      <li className="flex items-center gap-4">
        <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
          <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
            <Clock4 size={35} />
          </div>
        </div>
        <div className="flex flex-col gap-2">
          <span className="font-thin">Duração:</span>
          <span className="text-xl">30 Hrs/Curso Rápido</span>
        </div>
      </li>
      <li className="flex items-center gap-4">
        <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
          <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
            <UserRound size={35} />
          </div>
        </div>
        <div className="flex flex-col gap-2">
          <span className="font-thin">Indicado para:</span>
          <span className="text-xl">Estudantes</span>
        </div>
      </li>
      <li className="flex items-center gap-4">
        <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
          <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
            <Calendar size={35} />
          </div>
        </div>
        <div className="flex flex-col gap-2">
          <span className="font-thin">Início:</span>
          <span className="text-xl">Imediato</span>
        </div>
      </li>
      <li className="flex items-center gap-4">
        <div className="rounded-full w-[60px] h-[60px] flex items-center justify-center bg-gradient-to-r from-green-700 to-green-50">
          <div className="rounded-full flex items-center justify-center w-[57px] h-[57px] bg-gray-900">
            <DollarSign size={35} />
          </div>
        </div>
        <div className="flex flex-col gap-2">
          <span className="font-thin">Investimento:</span>
          <span className="text-xl">R$200,00</span>
        </div>
      </li>
    </ul>
  )
}
