import { useState, type ComponentProps } from 'react'

export function InlineCounter(props: ComponentProps<'span'>) {
  const [count, setCount] = useState(0)
  return (
    <span {...props}>
      {count}{' '}
      <button
        type="button"
        onClick={() => setCount((prev) => prev + 1)}
        className="inline hover:underline"
      >
        (increment)
      </button>
    </span>
  )
}
