import { useObjectState } from "@/hooks/use-object-state"
 
interface TeamStats {
  team: string
  wins: number
  losses: number
  championships: number
}
 
const initialState: TeamStats = {
  team: "Utah Jazz",
  wins: 2138,
  losses: 1789,
  championships: 0,
}
 
export default function UseObjectStateDemo() {
  const [stats, setStats] = useObjectState<TeamStats>(initialState)
 
  const addWin = () => {
    setStats((s) => ({
      wins: s.wins + 1,
    }))
  }
 
  const addLoss = () => {
    setStats((s) => ({
      losses: s.losses + 1,
    }))
  }
 
  const reset = () => {
    setStats(initialState)
  }
 
  return (
    <section>
      <h1>Team Statistics</h1>
      <div>
        <button onClick={addWin}>Add Win</button>
        <button onClick={addLoss}>Add Loss</button>
        <button onClick={reset}>Reset</button>
      </div>
      <table>
        <thead>
          <tr>
            {(Object.keys(stats) as Array<keyof TeamStats>).map((key) => (
              <th key={key}>{key}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          <tr>
            {(Object.keys(stats) as Array<keyof TeamStats>).map((key) => (
              <td key={key}>{stats[key]}</td>
            ))}
          </tr>
        </tbody>
      </table>
    </section>
  )
}