import Link from "next/link";
import type { Course } from "@/types/course";
import ProgressBar from "@/components/ProgressBar";

type CourseCardProps = {
  course: Course;
  progress?: number;
};

export default function CourseCard({ course, progress = 0 }: CourseCardProps) {
  return (
    <Link
      href={`/courses/${course.slug}`}
      className="group flex h-full flex-col justify-between rounded-2xl border border-slate-300 bg-white p-6 shadow-sm transition hover:-translate-y-0.5 hover:border-brand/60"
    >
      <div className="space-y-3">
        <div className="flex items-center justify-between">
          <span className="rounded-full bg-[#ead7a0] px-3 py-1 text-xs font-semibold text-[#8a6b00]">{course.level}</span>
          <span className="text-sm font-semibold text-slate-700">Rating {course.rating.toFixed(1)}</span>
        </div>
        <h3 className="text-2xl leading-tight text-[#212937] md:text-4xl">{course.title}</h3>
        <p className="text-base text-slate-600 md:text-lg">{course.summary}</p>
      </div>

      <div className="mt-5 border-t border-slate-200 pt-4 text-base text-slate-600 md:text-lg">
        {progress > 0 ? (
          <div className="mb-4">
            <ProgressBar value={progress} label={`Progress ${progress}%`} />
          </div>
        ) : null}
        <div className="mb-1 flex items-center justify-between">
          <span>{course.weeks} weeks</span>
          <span>{course.lessonsCount} lessons</span>
        </div>
        <div className="mb-3 flex items-center justify-between">
          <span>{course.students.toLocaleString()} students</span>
          <span className="text-brand transition-transform group-hover:translate-x-1">{">"}</span>
        </div>
        <div className="text-sm font-semibold text-slate-700 md:text-base">By {course.instructor}</div>
      </div>
    </Link>
  );
}