import Link from "next/link";
import { curriculum } from "@/lib/curriculum";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

export default function LessonsOverview() {
  return (
    <div>
      <h1 className="mb-2 text-3xl font-bold tracking-tight">All Topics</h1>
      <p className="mb-10 text-muted">Form 1 &mdash; Select a topic to explore</p>

      {curriculum.map((unit) => (
        <section key={unit.slug} className="mb-12">
          <div className="mb-4 flex items-center gap-3">
            <Badge variant={unit.color}>Unit {unit.number}</Badge>
            <h2 className="text-xl font-semibold">{unit.title}</h2>
            <span className="hidden text-sm text-muted sm:inline">{unit.weeks}</span>
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
            {unit.topics.map((topic) => (
              <Link key={topic.slug} href={`/lessons/${unit.slug}/${topic.slug}`}>
                <Card accent={unit.color} hover className="group h-full">
                  <h3 className="mb-1 font-semibold">{topic.title}</h3>
                  <p className="mb-3 text-sm leading-relaxed text-muted">{topic.description}</p>
                  <div className="flex items-center justify-between text-xs text-muted">
                    <span>Week {topic.week}</span>
                    <span className="flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
                      Explore
                      <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                        <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
                      </svg>
                    </span>
                  </div>
                </Card>
              </Link>
            ))}
          </div>
        </section>
      ))}
    </div>
  );
}