import { BookOpen, Clock, Heart } from "lucide-react"
import { Card, CardContent } from "../ui/card"
import Link from "next/link"
import { routes } from "@/lib/routes"
import { APP_BASE_URL } from "@/utils/constants"


interface CourseInterface {
  id : string ,
  image :string | null 
  title : string
  category ?: string
  lessons ?: string
  duration? : string
  instructor ?: {
    pfpFilename : string
    firstName : string
  }
}

const CourseCard : React.FC<CourseInterface> = ({
  id,
  image,
  title,
  category,
  lessons ,
  instructor,
  duration
}) => {
  return(
    <Card key={id} className="overflow-hidden">
            <Link href={routes?.COURSE_INDIVIDUAL_PAGE.replace(':id',id)}>
            
              <div className="relative">
                
                <img
                  src={image!}
                  alt={title}
                  className="w-full h-48 object-cover"
                />
                <span className="absolute top-4 left-4 bg-purple-700/90 text-white px-3 py-1 rounded-full text-sm">
                  {category}
                </span>
                {/* <button className="absolute top-4 right-4 p-2 bg-white/90 rounded-full hover:bg-white">
                  <Heart className="w-4 h-4 fill-red-500 text-red-500" />
                </button> */}
              </div>
            </Link>
            <CardContent className="p-6">
              <div className="flex gap-4 text-sm text-gray-600 mb-3">
                <div className="flex items-center gap-1">
                  <BookOpen className="w-4 h-4" />
                  <span>{lessons} Lesson</span>
                </div>
                <div className="flex items-center gap-1">
                  <Clock className="w-4 h-4" />
                  <span>{duration}</span>
                </div>
              </div>
              <h3 className="text-lg font-semibold mb-4">{title}</h3>
              <div className="flex justify-between items-center">
                <div className="flex items-center gap-2">
                  <img
                    src={APP_BASE_URL + instructor?.pfpFilename}
                    alt={instructor?.firstName}
                    className="w-8 h-8 rounded-full"
                  />
                  <span className="text-sm">
                    <Link href={routes.PROFILE_ROUTE}>
                      {instructor?.firstName}
                    </Link>
                  </span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-purple-700 font-semibold text-sm px-4 py-1 bg-purple-200 rounded-2xl">Free</span>
                </div>
              </div>
            </CardContent>
          </Card>
  )
}

export default CourseCard