import { CourseIdProps } from '@/api/courses'
import { format, parseISO } from 'date-fns'
import { toZonedTime } from 'date-fns-tz'
import { Calendar, Clock4, UserRound } from 'lucide-react'

type CourseProps = {
  data?: CourseIdProps
}

export function CourseDetails(course: CourseProps) {
  const formatDate = (dateString: string | undefined) => {
    if (!dateString) return

    const date = parseISO(dateString)
    const utcDate = toZonedTime(date, 'UTC')
    return format(utcDate, 'dd/MM/yyyy')
  }

  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] dark:bg-gray-900 bg-gray-50">
            <Clock4 size={35} />
          </div>
        </div>
        <div className="flex flex-col gap-2">
          <span className="font-thin">Duração:</span>
          <span className="text-xl">
            {course.data?.workload.toString()} Hrs/{course.data?.category.name}
          </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] dark:bg-gray-900 bg-gray-50">
            <UserRound size={35} />
          </div>
        </div>
        <div className="flex flex-col gap-2">
          <span className="font-thin">Indicado para:</span>
          <span className="text-xl">{course.data?.audience.name}</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] dark:bg-gray-900 bg-gray-50">
            <Calendar size={35} />
          </div>
        </div>
        <div className="flex flex-col gap-2">
          <span className="font-thin">Início:</span>
          <span className="text-xl">{formatDate(course.data?.startDate)}</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] dark:bg-gray-900 bg-gray-50">
            <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>
  )
}
