import Link from "next/link"

const courseItems = [
  { name: "AB Slim", slug: "ab-slim" },
  { name: "Maca", slug: "maca" },
  { name: "Vega XL", slug: "vega-xl" },
  { name: "Wega Fem", slug: "wega-fem" },
  { name: "Vega Musli", slug: "vega-musli" },
  { name: "Viga Power", slug: "viga-power" },
  { name: "Maxman", slug: "maxman" },
  { name: "Vimax", slug: "vimax" },
  { name: "Courses", slug: "courses" },
  { name: "Kendriya", slug: "kendriya" },
]

export function CoursesLinks() {
  return (
    <section className="py-8 bg-muted/30">
      <div className="container mx-auto px-4">
        <h2 className="text-xl md:text-2xl font-bold text-center mb-6 text-foreground">Courses</h2>
        <div className="flex flex-wrap justify-center gap-3 md:gap-4">
          {courseItems.map((item) => (
            <Link
              key={item.slug}
              href={`/product/${item.slug}`}
              className="px-4 py-2 bg-card border border-border rounded-full text-sm md:text-base font-medium text-foreground hover:bg-primary hover:text-primary-foreground hover:border-primary transition-all duration-200"
            >
              {item.name}
            </Link>
          ))}
        </div>
      </div>
    </section>
  )
}
