import { useState } from 'react';

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

export function Counter({ initial = 0, label = 'Count' }: 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>
    );
}