import { BookOpen, Clock, Heart } from "lucide-react"
import { Card, CardContent } from "../ui/card"


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

const CourseCard : React.FC<CourseInterface> = ({
  id,
  image,
  title,
  category,
  lessons ,
  instructor,
  duration
}) => {
  return(
    <Card key={id} className="overflow-hidden">
            <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>
            <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={instructor?.image}
                    alt={instructor?.name}
                    className="w-8 h-8 rounded-full"
                  />
                  <span className="text-sm">{instructor?.name}</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