import Link from 'next/link'
import Image from 'next/image'
import { Card } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Clock, ArrowRight } from 'lucide-react'
import { CourseDetail, getSimilarCourses, formatPrice } from '@/lib/courses'
import { SectionHeader } from '@/components/section-header'

interface SimilarCoursesProps {
  course: CourseDetail
}

export function SimilarCourses({ course }: SimilarCoursesProps) {
  const similar = getSimilarCourses(course, 3)

  if (similar.length === 0) return null

  return (
    <section className="section-padding bg-muted/30 border-t border-border/50">
      <div className="container-wide">
        <SectionHeader
          eyebrow="You May Also Like"
          title="Similar Courses"
          description="Explore related programmes in the same subject area."
          align="left"
        />

        <div className="grid md:grid-cols-3 gap-6">
          {similar.map((c) => (
            <Link key={c.id} href={`/courses/${c.slug}`}>
              <Card className="overflow-hidden h-full hover:shadow-lg hover:border-primary/30 transition-all group p-0 gap-0 border-border/50">
                <div className="relative h-40 bg-muted overflow-hidden">
                  <Image src={c.image} alt={c.title} fill className="object-cover group-hover:scale-105 transition-transform duration-500" />
                  <Badge className="absolute top-3 left-3 bg-white/90 text-primary border-0 text-xs">{c.level}</Badge>
                </div>
                <div className="p-5 space-y-2">
                  <Badge variant="outline" className="text-xs">{c.category}</Badge>
                  <h3 className="font-bold text-sm leading-snug line-clamp-2 group-hover:text-primary transition-colors">{c.title}</h3>
                  <div className="flex items-center justify-between pt-2">
                    <span className="flex items-center gap-1 text-xs text-muted-foreground">
                      <Clock className="w-3 h-3" />{c.duration}
                    </span>
                    <span className="text-sm font-bold text-primary">{formatPrice(c.price)}</span>
                  </div>
                  <span className="inline-flex items-center gap-1 text-xs font-semibold text-accent pt-1">
                    View Course <ArrowRight className="w-3 h-3" />
                  </span>
                </div>
              </Card>
            </Link>
          ))}
        </div>
      </div>
    </section>
  )
}