const filters = [
  { key: 'all', label: 'همه', empty: 'هنوز هیچ اعلانی ثبت نشده است.' },
  { key: 'unread', label: 'خوانده‌نشده', empty: 'اعلان خوانده‌نشده‌ای نداری.' },
  { key: 'tasks', label: 'تسک‌ها', empty: 'اعلان تسکی وجود ندارد.' },
  { key: 'comments', label: 'کامنت‌ها', empty: 'اعلان کامنتی وجود ندارد.' },
  { key: 'mentions', label: 'منشن‌ها', empty: 'منشنی برای نمایش وجود ندارد.' },
  { key: 'deadlines', label: 'ددلاین‌ها', empty: 'اعلان ددلاینی وجود ندارد.' },
  { key: 'system', label: 'سیستمی', empty: 'پیام سیستمی وجود ندارد.' },
];

export function getNotificationFilter(key) {
  return filters.find((item) => item.key === key) || filters[0];
}

export default function PwaNotificationFilters({ value, onChange }) {
  return (
    <div className="pwa-filter-row">
      {filters.map((item) => (
        <button key={item.key} type="button" className={value === item.key ? 'active' : ''} onClick={() => onChange(item.key)}>
          {item.label}
        </button>
      ))}
    </div>
  );
}
