import { useSignal } from 'eclipsa'

export default function CounterCard() {
  const count = useSignal(0)

  return (
    <section class="rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm">
      <p class="text-sm uppercase tracking-[0.3em] text-zinc-500">Counter</p>
      <div class="mt-4 flex items-center gap-4">
        <button
          class="rounded-full bg-zinc-950 px-4 py-2 text-sm font-medium text-white"
          onClick={() => count.value++}
        >
          Increment
        </button>
        <strong class="text-2xl text-zinc-950">{count.value}</strong>
      </div>
    </section>
  )
}