import * as React from "react"
import { TopN, type TopSource } from "@/registry/charts/top-n"

const items: TopSource[] = [
  { sourceId: "ke", slug: "kenya-trade-portal", users: 18420, countryCode: "ke" },
  { sourceId: "rw", slug: "rwanda-business-reg", users: 14210, countryCode: "rw" },
  { sourceId: "gh", slug: "ghana-permits", users: 9870, countryCode: "gh" },
  { sourceId: "ci", slug: "cote-divoire-customs", users: 6540, countryCode: "ci" },
  { sourceId: "sn", slug: "senegal-licenses", users: 3120, countryCode: "sn" },
]

const names = new Map<string, { name?: string }>([
  ["ke", { name: "Kenya Trade Portal" }],
  ["rw", { name: "Rwanda Business Registration" }],
  ["gh", { name: "Ghana Permits" }],
  ["ci", { name: "Côte d'Ivoire Customs" }],
  ["sn", { name: "Senegal Licenses" }],
])

export default function TopNDemo() {
  return (
    <div className="w-full max-w-md">
      <TopN items={items} names={names} />
    </div>
  )
}