"use client";

import { Card, CardContent } from "@/components/ui/card";

const categories = [
  { name: "Investment", total: 45 },
  { name: "Technology", total: 32 },
  { name: "Partnership", total: 28 },
  { name: "Report", total: 23 },
  { name: "Event", total: 19 },
  { name: "CSR", total: 15 },
];

export default function ContentCategory() {
  return (
    <section className="py-20 ">
      <div className="container mx-auto px-6">
        {/* ===== Title ===== */}
        <h2 className="text-3xl font-bold text-center mb-12">
          Kategori Konten
        </h2>

        {/* ===== Card ===== */}
        <Card className="rounded-2xl shadow-xl border-1 ">
          <CardContent className="p-10 space-y-8">
            {categories.map((item, index) => (
              <div key={index} className="flex items-center justify-between">
                {/* Left */}
                <div className="flex items-center gap-4">
                  {/* Bullet */}
                  <div
                    className={`w-3 h-3 rounded-full ${
                      index % 2 === 0
                        ? "bg-[#0f3b63]" // biru tua
                        : "bg-[#b07c18]" // gold
                    }`}
                  />

                  <span className="text-lg text-[#0f3b63] font-medium">
                    {item.name}
                  </span>
                </div>

                {/* Right total */}
                <span className="text-gray-500 text-lg">{item.total}</span>
              </div>
            ))}
          </CardContent>
        </Card>
      </div>
    </section>
  );
}