import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { CourseData } from "@/helpers/apiSchema/course.schema"


interface CourseDetailHeroSectionProps {
  courseData: CourseData;
}


const CourseDetailHeroSection: React.FC<CourseDetailHeroSectionProps> = ({courseData}) => {
  return(
    <div className="bg-purple-700 text-white">
      <div className="container mx-auto px-4 py-12">
          <div className="grid md:grid-cols-2 gap-8 items-center">
              <div className="space-y-4">
                  <h1 className="text-3xl font-bold">{courseData.title}</h1>
                  <p className="text-blue-100">{courseData.description}</p>


                  <div className="flex items-center space-x-4">
                      <Avatar className="h-12 w-12">
                          <AvatarImage src={courseData.instructor.avatar} className='aspect-1/1'/>
                          <AvatarFallback>SJ</AvatarFallback>
                      </Avatar>
                      <div>
                          <div className="font-semibold">{courseData.instructor.name}</div>
                          <div className="text-sm text-blue-100">{courseData.instructor.title}</div>
                          <div>Published at {courseData?.lastUpdated}</div>
                      </div>
                  </div>
              </div>
              {/* course image */}
              <Card className="bg-white">
                  <CardContent className="p-6 space-y-4">
                      <img
                          src="https://placehold.co/600x400"
                          alt="Course Preview"
                          className="w-full rounded-lg"
                      />
                      <Button className="w-full text-lg h-12 bg-purple-700">
                          Enroll Now
                      </Button>
                  </CardContent>
              </Card>
          </div>
      </div>
  </div>
  )
}

export default CourseDetailHeroSection