src/components/SortToggle.tsx

import React from "react";

export type SortMethod = "activity" | "recent";

interface SortToggleProps {
  sortMethod: SortMethod;
  onToggle: (method: SortMethod) => void;
}

export default function SortToggle({ sortMethod, onToggle }: SortToggleProps) {
  return (
    <div className="flex items-center justify-center gap-2 mb-8">
      <span className="text-sm text-muted-foreground">Sort by:</span>
      <div className="inline-flex rounded-lg border border-border bg-muted p-1">
        <button
          onClick={() => onToggle("activity")}
          className={`px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
            sortMethod === "activity"
              ? "bg-background text-foreground shadow-sm"
              : "text-muted-foreground hover:text-foreground"
          }`}
        >
          Most Active
        </button>
        <button
          onClick={() => onToggle("recent")}
          className={`px-4 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
            sortMethod === "recent"
              ? "bg-background text-foreground shadow-sm"
              : "text-muted-foreground hover:text-foreground"
          }`}
        >
          Most Recent
        </button>
      </div>
    </div>
  );
}