import { Calendar, Clock4, User } from 'lucide-react'
import Image from 'next/image'
import Link from 'next/link'

type CardDetailsTypes = {
  details: {
    id: string
    image: { src: string; width: number; height: number }
    title: string
    hours: string
    category: string
    calender: string
  }
  imageWidth: number
  imageHeight: number
}

export function Card({ details, imageWidth, imageHeight }: CardDetailsTypes) {
  return (
    <div
      className={`bg-green-50 md:w-[${imageWidth.toString()}px] pl-0 rounded-lg`}
    >
      <Link className="lowercase " href={`${details.category}/${details.id}`}>
        <div className="relative">
          <Image
            src={details.image.src}
            width={imageWidth}
            height={imageHeight}
            alt="Capa do curso"
            className={`object-cover rounded-lg w-full h-[274px] md:h-[${imageHeight.toString()}px] `}
          />
          <div className="absolute bottom-0 h-1/2 w-full bg-gradient-to-t from-black/85 from-10% to-transparent flex justify-center items-end rounded-b-lg">
            <span className="text-center text-lg lg:text-2xl px-1 pb-8">
              {details.title}
            </span>
          </div>
        </div>
        <div className="flex items-center gap-2 p-2">
          <Clock4 size={16} />
          <span className="text-xs lg:text-sm">{details.hours}</span>
        </div>
        <div className="flex items-center gap-2 p-2">
          <User size={16} />
          <span className="text-xs lg:text-sm capitalize">
            {details.category}
          </span>
        </div>
        <div className="flex items-center gap-2 p-2">
          <Calendar size={16} />
          <span className="text-xs lg:text-sm capitalize">
            {details.calender}
          </span>
        </div>
      </Link>
    </div>
  )
}
