import Image from 'next/image'

import schoolOnline from '../../public/images/school-online.svg'
import tableClock from '../../public/images/table-clock.svg'
import certificateOutline from '../../public/images/certificate-outline.svg'

export function Benefits() {
  return (
    <section className="hidden md:flex">
      <div className="container h-80">
        <ul className="flex h-full justify-around items-center gap-2">
          <li className="flex flex-col items-center gap-4">
            <Image width={72} src={schoolOnline} alt="100% online" />
            <span className="text-gray-50 font-extrabold text-3xl">
              100% online
            </span>
          </li>
          <li className="flex flex-col items-center gap-4">
            <Image width={72} src={tableClock} alt="Prazos flexíveis" />
            <span className="text-gray-50 font-extrabold text-3xl">
              Prazos flexíveis
            </span>
          </li>
          <li className="flex flex-col items-center gap-4">
            <Image width={72} src={certificateOutline} alt="Certificados" />
            <span className="text-gray-50 font-extrabold text-3xl">
              Certificados
            </span>
          </li>
        </ul>
      </div>
    </section>
  )
}
