"use client"
 
import { useMap } from "@/hooks/use-map"
 
type TeamName = "Jazz" | "Suns"
 
export function Component() {
  const map = useMap<TeamName, number>([
    ["Jazz", 32],
    ["Suns", 50],
  ])
 
  return (
    <section>
      <h1>useMap</h1>
      <table>
        <thead>
          <tr>
            <th colSpan={4}>Jazz vs Suns</th>
          </tr>
        </thead>
        <tbody>
          {Array.from(map.keys()).map((team) => {
            const score = map.get(team)!
            return (
              <tr key={team}>
                <th style={{ width: "25%" }}>{team}</th>
                <td style={{ width: "50%" }}>{score}</td>
                <td style={{ width: "12.5%" }}>
                  <button onClick={() => map.set(team, score + 2)}>+ 2</button>
                </td>
                <td style={{ width: "12.5%" }}>
                  <button onClick={() => map.set(team, score + 3)}>+ 3</button>
                </td>
              </tr>
            )
          })}
        </tbody>
      </table>
    </section>
  )
}