import { useState } from 'react';

interface CounterProps {
  initial?: number;
  label?: string;
}

export function Counter({ initial = 0, label = 'Clicks' }: CounterProps) {
  const [count, setCount] = useState(initial);

  return (
    <div className="card bg-base-100 shadow-xl">
      <div className="card-body items-center text-center">
        <h2 className="card-title">
          {label}
        </h2>

        <div className="text-6xl font-bold my-4">
          {count}
        </div>

        <div className="card-actions">
          <button className="btn btn-primary" onClick={() => setCount(c => c + 1)}>
            +1
          </button>

          <button className="btn btn-secondary" onClick={() => setCount(c => c - 1)}>
            -1
          </button>

          <button className="btn btn-ghost" onClick={() => setCount(initial)}>
            Reset
          </button>
        </div>
      </div>
    </div>
  );
}