import cx from 'classnames';
import { h, Component } from 'preact';
import { pluralize } from './util';

export default class TodoFooter extends Component {
    render({ nowShowing, count, completedCount, onClearCompleted }) {
        return (
            <footer class="footer">
                <span class="todo-count">
                    <strong>{count}</strong> {pluralize(count, 'item')} left
                </span>
                <ul class="filters">
                    <li>
                        <a href="#/" class={cx({ selected: nowShowing == 'all' })}>All</a>
                    </li>
                    {' '}
                    <li>
                        <a href="#/active" class={cx({ selected: nowShowing == 'active' })}>Active</a>
                    </li>
                    {' '}
                    <li>
                        <a href="#/completed" class={cx({ selected: nowShowing == 'completed' })}>Completed</a>
                    </li>
                </ul>
                { completedCount > 0 && (
                    <button class="clear-completed" onClick={onClearCompleted}>
                        Clear completed
                    </button>
                ) }
            </footer>
        );
    }
}