// frontend/components/inbox/SphereFilters.tsx
"use client";
import { SPHERE } from "@/lib/inbox/presentation";
import type { Sphere } from "@/lib/types";

const TABS: ["all" | Sphere, string][] = [
  ["all", "전체"],
  ["work", "업무"],
  ["life", "개인"],
];

export default function SphereFilters({
  filter,
  onFilter,
}: {
  filter: "all" | Sphere;
  onFilter: (f: "all" | Sphere) => void;
}) {
  return (
    <div className="sb-filters">
      {TABS.map(([k, l]) => (
        <button
          key={k}
          className={"sb-f" + (filter === k ? " on" : "")}
          onClick={() => onFilter(k)}
          aria-pressed={filter === k}
        >
          {k !== "all" && (
            <span className="fdot" style={{ background: SPHERE[k as Sphere].tone }} />
          )}
          {l}
        </button>
      ))}
      <span className="sb-hint">업무/개인은 필터일 뿐 — 작업은 한 곳에서 다 보여요</span>
    </div>
  );
}
