import { useTranslation } from "react-i18next";
import { Library, User } from "lucide-react";
import SegmentedToggle from "./SegmentedToggle";
import { useFeedFilters, useFeedFiltersActions } from "./FeedFiltersProvider";

// The feed's Mine/Library scope, relocated from the filter sidebar to sit just right of the header
// search box — mirroring PlexScopeToggle's placement, so the primary "what am I browsing" control is
// always in reach instead of buried in the (possibly collapsed) filter rail. Same `filters.scope`
// field, so behaviour is unchanged. The `pointer-events-auto`/`shrink-0` wrapper matches the other
// header pills: the header band is `pointer-events-none`, and the pill must not collapse in the flex row.
export default function FeedScopeToggle() {
  const { t } = useTranslation();
  const filters = useFeedFilters();
  const { setFilters } = useFeedFiltersActions();
  return (
    <div className="pointer-events-auto shrink-0">
      <SegmentedToggle
        size="md"
        ariaLabel={t("header.scope.label")}
        options={[
          {
            value: "my",
            label: t("header.scope.my"),
            icon: <User className="w-3.5 h-3.5" />,
            title: t("header.scope.myTip"),
          },
          {
            value: "all",
            label: t("header.scope.all"),
            icon: <Library className="w-3.5 h-3.5" />,
            title: t("header.scope.allTip"),
          },
        ]}
        value={filters.scope}
        onChange={(scope) => setFilters({ ...filters, scope })}
      />
    </div>
  );
}