import Link from 'next/link'
import Image from 'next/image'
import { Badge } from '@/components/ui/badge'
import { type CourseDetail, formatPrice, getCourseStartDate } from '@/lib/courses'
import { ArrowRight, Calendar, Clock, MapPin, Users } from 'lucide-react'

type CourseListingCardProps = {
  course: CourseDetail
}

export function CourseListingCard({ course }: CourseListingCardProps) {
  return (
    <article className="group overflow-hidden rounded-xl border border-border/70 bg-card transition-all hover:border-primary/35 hover:shadow-md">
      <Link href={`/courses/${course.slug}`} className="flex flex-col md:flex-row">
        <div className="relative h-52 w-full shrink-0 md:h-auto md:w-72 lg:w-80">
          <Image
            src={course.image}
            alt={course.title}
            fill
            className="object-cover transition-transform duration-500 group-hover:scale-[1.03]"
            sizes="(max-width: 768px) 100vw, 320px"
          />
        </div>

        <div className="flex flex-1 flex-col p-5 md:p-6">
          <div className="mb-3 flex flex-wrap items-center gap-2">
            <Badge variant="outline" className="text-xs font-medium">
              {course.category}
            </Badge>
            <Badge className="bg-primary text-primary-foreground text-xs">{course.level}</Badge>
            <Badge variant="outline" className="text-xs text-muted-foreground">
              {course.format}
            </Badge>
          </div>

          <h3 className="text-xl font-bold leading-snug text-foreground transition-colors group-hover:text-primary">
            {course.title}
          </h3>
          <p className="mt-2 line-clamp-2 text-sm leading-relaxed text-muted-foreground">
            {course.description}
          </p>

          <div className="mt-4 grid grid-cols-1 gap-2.5 text-sm sm:grid-cols-2">
            <div className="flex items-center gap-2 text-foreground/90">
              <Calendar className="h-4 w-4 shrink-0 text-primary" />
              <span>{getCourseStartDate(course.scheduleOffset)}</span>
            </div>
            <div className="flex items-center gap-2 text-foreground/90">
              <Clock className="h-4 w-4 shrink-0 text-primary" />
              <span>{course.duration}</span>
            </div>
            <div className="flex items-center gap-2 text-foreground/90">
              <MapPin className="h-4 w-4 shrink-0 text-primary" />
              <span>{course.location}</span>
            </div>
            <div className="flex items-center gap-2 text-foreground/90">
              <Users className="h-4 w-4 shrink-0 text-primary" />
              <span>{course.spots} spaces available</span>
            </div>
          </div>

          <div className="mt-auto flex items-center justify-between gap-4 border-t border-border/60 pt-4 md:pt-5">
            <span className="text-2xl font-bold text-primary">{formatPrice(course.price)}</span>
            <span className="inline-flex items-center gap-1.5 text-sm font-semibold text-accent">
              View Details
              <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
            </span>
          </div>
        </div>
      </Link>
    </article>
  )
}