interface LockToggleProps {
  showLocked: boolean;
  onToggle: () => void;
  lockedCount: number;
}

export const LockToggle = ({
  showLocked,
  onToggle,
  lockedCount,
}: LockToggleProps): React.JSX.Element => (
  <button
    className={`lock-toggle ${showLocked ? "lock-toggle-on" : "lock-toggle-off"}`}
    onClick={onToggle}
    title={showLocked ? "Hide locked items" : "Show locked items"}
    type="button"
  >
    {showLocked ? "🔓" : "🔒"} {showLocked ? "Hide" : "Show"} locked ({lockedCount})
  </button>
);