import Link from "next/link"

const features = [
  { name: "Mistake Tracking", href: "/dashboard/ai-coach/mistakes" },
  { name: "Spaced Repetition", href: "/dashboard/ai-coach/mistakes" },
  { name: "Study Plan", href: "/dashboard/ai-coach/study-plan" },
  { name: "AI Tutor", href: "/dashboard/ai-coach/tutor" },
  { name: "Readiness Score", href: "/dashboard/ai-coach/readiness" },
  { name: "Exam Strategy", href: "/dashboard/ai-coach/strategy" },
  { name: "College Predictor", href: "/dashboard/ai-coach/college-predictor" },
  { name: "Time Optimization", href: "/dashboard/ai-coach/strategy" },
]

export function FeatureIndex() {
  return (
    <div className="py-2 mb-4">
      <div className="flex flex-wrap gap-2.5">
        {features.map((f) => (
          <Link
            key={f.name}
            href={f.href}
            className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-extrabold bg-[var(--cyan-ai-10)] border border-[var(--cyan-ai-30)] text-[var(--cyan-ai)] hover:bg-[var(--cyan-ai)] hover:text-black transition-all shadow-[0_0_12px_rgba(12,96,96,0.1)] group"
          >
            <span className="size-2 rounded-full bg-[var(--cyan-ai)] group-hover:bg-black transition-colors" />
            <span>{f.name}</span>
            <span className="text-[10px] opacity-75">→</span>
          </Link>
        ))}
      </div>
    </div>
  )
}