components/TimeFilter.js

export default function TimeFilter({ activeFilter, onFilterChange }) {
  const filters = [
    { key: 'daily', label: 'Daily' },
    { key: 'weekly', label: 'Weekly' },
    { key: 'monthly', label: 'Monthly' },
    { key: 'all', label: 'All Time' },
  ];

  return (
    <div className="flex gap-1 p-1 bg-neutral-100 rounded-lg w-fit">
      {filters.map((filter) => (
        <button
          key={filter.key}
          onClick={() => onFilterChange(filter.key)}
          className={`px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
            activeFilter === filter.key
              ? 'bg-white text-neutral-800 shadow-sm'
              : 'text-neutral-600 hover:text-neutral-800'
          }`}
        >
          {filter.label}
        </button>
      ))}
    </div>
  );
}