import Image from 'next/image'
import { ReactNode } from 'react'

type CardImageProps = {
  children: ReactNode
  image: string
  width: string
  height: string
}

export function CardImage({ children, image, width, height }: CardImageProps) {
  return (
    <div className={`relative w-[${width}px] `}>
      <Image
        src={image}
        width={Number(width)}
        height={Number(height)}
        alt="Capa do curso"
        className={`object-cover rounded-lg h-[320px]`}
      />
      <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">
        {children}
      </div>
    </div>
  )
}
